如何获取绘制弧的第一个和最后一个点相对于画布左上角的x / y坐标?

时间:2010-09-08 20:26:19

标签: html5 canvas geometry coordinates geometric-arc

我有一个方形画布,宽度为100,高度为100。 在那个方格内,我画了一个弧形:

var canvas = document.getElementById('myCanvas');
var ctx    = canvas.getContext('2d');
ctx.clearRect(0,0,100,100) // clears "myCanvas" which is 100pixels by 100 pixels
ctx.beginPath();
ctx.arc( 50, 50, 30, 0, Math.PI*2/6 , false )
ctx.stroke();

问题是:如何获得绘制线相对于画布左上角的第一个和最后一个点的x / y坐标?

1 个答案:

答案 0 :(得分:4)

起点很简单(x + radius, y)。结尾点是简单的三角函数,(x + radius*cos(angle), y + radius*sin(angle))。请注意,在这种情况下,起点是更一般的终点的特殊情况,angle等于零。由于显而易见的原因,这些值也需要四舍五入到最接近的整数。

(请注意,这仅适用于anticlockwise参数为false,并假设所有坐标均从左上角开始测量。如果anticlockwise为真,则反转y的第二个分量的符号如果从另一个角落测量坐标,则应用简单的算术来纠正这个问题。另请注意,对于任何真正的数学家来说,这完全是倒退的。)