我有一个方形画布,宽度为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坐标?
答案 0 :(得分:4)
起点很简单(x + radius, y)
。结尾点是简单的三角函数,(x + radius*cos(angle), y + radius*sin(angle))
。请注意,在这种情况下,起点是更一般的终点的特殊情况,angle
等于零。由于显而易见的原因,这些值也需要四舍五入到最接近的整数。
(请注意,这仅适用于anticlockwise
参数为false,并假设所有坐标均从左上角开始测量。如果anticlockwise
为真,则反转y的第二个分量的符号如果从另一个角落测量坐标,则应用简单的算术来纠正这个问题。另请注意,对于任何真正的数学家来说,这完全是倒退的。)