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

Question

我有一个正方形的帆布，宽度为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坐标？

Answer 1

起点是微不足道的 (x + radius, y). 。终点是通过简单的三角学， (x + radius*cos(angle), y + radius*sin(angle)). 。请注意，在这种情况下的起点是更通用终点的特殊情况， angle 等于零。出于明显的原因，这些值还需要四舍五入到最近的整数。

（请注意，仅在 anticlockwise 参数是错误的，假设所有坐标都是从左上角测量的。如果 anticlockwise 是真的，反向y坐标的第二个组件的符号。如果从另一个角落测量坐标，请应用简单的算术计算以对此进行纠正。另请注意，对于任何真正的数学家来说，这都是完全倒退的。）