HTML5获取弧线末端的坐标

Question

如果我们画一个弧形，如何获取弧终点（最后一个点）相对于中心的坐标？

- benjamin54

---

你是指使用<canvas>绘制弧线吗？你能提供一些代码或jsfiddle吗？ - Oriol

是的，可以使用<canvas>。 var canvas = document.getElementById('Canvas1'); var ctx = canvas.getContext('2d'); ctx.beginPath(); ctx.arc( 0, 0, 20, -180,-140 , false ) ctx.stroke(); - benjamin54

“最后一点”是什么意思？所有点与中心的距离相同。 - Oriol

实际上我的意思是圆弧结束的点（角度为-140）。 - benjamin54

为什么要使用-140？角度以弧度为单位，-140弧度相当于-8021.409131831525度。如果使用度数，请使用“radians =（Math.PI / 180）* degrees”进行转换。 - Oriol

Answer 1

参见http://jsfiddle.net/5DdQt/

使用

function getPoint(c1,c2,radius,angle){
    return [c1+Math.cos(angle)*radius,c2+Math.sin(angle)*radius];
}

• c1和c2是弧线中心点的坐标。
• radius是圆弧的半径。
• angle是最后一个点的角度，单位为弧度。

弧度 = (度数 * Math.PI) / 180。

- Oriol

---

我试图使用这段代码来获取圆形上特定角度的点。我将0-2作为我的角度值发送进去，但是得到了奇怪的响应。改为使用angle*Math.PI而不是简单的angle对我有用。 - Tyler

用这个方法在纯JS饼图中添加标签。取饼片开始和结束角度的算术平均值和小于饼图半径的半径即可。效果非常好。 - MDickten