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

【问题标题】：How do i get the x/y coordinates of the first and last points of the drawn arc relative to the top left corner of the canvas?如何获得绘制弧的第一个和最后一个点相对于画布左上角的 x/y 坐标？
【发布时间】：2011-04-09 22:53:44
【问题描述】：

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

【问题讨论】：

标签： html canvas geometry coordinates geometric-arc

【解决方案1】：

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

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

【讨论】：

我很确定你是正确的，只是为了确保我做的是正确的事，因为英语是我的第二语言，你能否详细说明你说“reverse the y 坐标的第二个分量的符号”？
好吧，如果anticlockwise 为真，我们将不得不用y - radius*sin(angle) 替换y 坐标，因为它实际上会在x 轴上镜像。因此，反转符号。（我承认，这是一个不必要的复杂措辞）
顺便谢谢你。解决了我所有的问题。