3

我有一个宽度为 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 坐标？

4

1 回答 1

4

起点是微不足道的(x + radius, y)。终点是，通过简单的三角函数，(x + radius*cos(angle), y + radius*sin(angle))。请注意，这种情况下的起点是更一般的终点的特例，angle等于零。出于显而易见的原因，这些值也需要四舍五入到最接近的整数。

（请注意，这仅适用于anticlockwise参数为假的情况，并假设所有坐标都是从左上角测量的。如果anticlockwise为真，则反转 y 坐标的第二个分量的符号。如果坐标是从另一个角测量的，则应用简单的算术纠正这一点。另请注意，这对于任何真正的数学家来说都是完全倒退的。）

于 2010-09-08T20:43:08.140 回答