如何获取绘制弧线的第一个点和最后一个点相对于画布左上角的 x/y 坐标？
我有一个正方形画布，宽度为 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 坐标？
I have a square canvas with a width of 100 and a height of 100.
Within that square I draw an arc like so:
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();
The question is: How do i get the x/y coordinates of the first and last points of the drawn line relative to the top left corner of the canvas?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
起点很简单
(x + radius, y)。通过简单的三角函数，终点为(x + radius*cos(angle), y + radius*sin(angle))。请注意，本例中的起点是更一般终点的特殊情况，angle等于零。出于显而易见的原因，这些值还需要四舍五入到最接近的整数。（请注意，这仅适用于
anticlocked参数为 false 的情况，并且假设所有坐标都是从左上角开始测量的。如果anticlocked为 true，则反转第二个分量的符号如果坐标是从另一个角测量的，请应用简单的算术来纠正这一点，这对于任何真正的数学家来说都是完全相反的。）The starting point is trivially
(x + radius, y). The ending point is, by simple trigonometrics,(x + radius*cos(angle), y + radius*sin(angle)). Note that the starting point in this case is a special case of the more general ending point, withangleequal to zero. These values also need to be rounded to the nearest integer, for obvious reasons.(Note that this applies only when the
anticlockwiseargument is false, and assuming all coordinates are measured from the top left. Ifanticlockwiseis true, reverse the sign of the second component of the y coordinate. If coordinates are measured from another corner, apply simple arithmetics to correct for this. Also note that this is completely backwards for any real mathematician.)