使用html5画布在圆圈中以不同角度显示不同的值

Question

使用HTML5 Canvas和Javascript我需要在圆圈内的不同角度显示不同的值(可能用点表示).

示例数据:
val 34%@ 0°,
val 54%@ 12°,
val 23%@ 70°,
依此类推......

如果我有300 x 300px的画布并且圆的中心位于x:150px且y:150px,半径为150px,我将如何计算在12度时将点设置为54%的位置？

我的数学有点可怕xD

我会感激任何帮助,如果我不够清楚,请提出问题.

感谢您的倾听,并提前感谢您的深刻见解:D

编辑(更详细解释):

这是一张图片来说明我想要完成的任务:

我希望这使我的问题更容易理解.
(如您所见,与上述值不同)

Ty耐心等待!

Answer 1

您可以使用它将极坐标(半径,角度)坐标转换为笛卡尔坐标:

// ? : angle in [0, 2?[
function polarToCartesian(r, ?) {
    return {x:r*Math.cos(?), y: r*Math.sin(?)};
}

例如,如果要以12°绘制,则可以计算如下点:

var p = polarToCartesian(150, 12*2*Math.PI/360);
p.x += 150; p.y += 150;

编辑:我的polarToCartesian函数将弧度作为输入,与Canvas API中的许多函数一样.如果你更习惯学位,你可能需要这个:

 function degreesToRadians(a) {
     return Math.PI*a/180;
 }