用于在圆周上绘制小线条的数学

时间:2010-09-28 08:00:13

标签: javascript html5 canvas

我必须围绕一个圆圈绘制线条(就像时钟一样)。如何使用for循环实现此目的? alt text

3 个答案:

答案 0 :(得分:9)

我不确定如何在Java中实际绘制一条线,而是从中心点(cx,cy)使用

计算坐标
px = cx+sin(a)*r
py = cy+cos(a)*r

a是角度(以弧度表示 - 我认为即180度=π弧度),r是半径。

要绘制外围的小线条,您需要使用此公式,例如半径为100,半径为105,并在两组坐标之间绘制。

例如

for (var a=0,aMax=(2*Math.PI),aStep=(Math.PI/30); a<aMax; a+=aStep){
    px1 = cx+Math.sin(a)*r;
    py1 = cy+Math.cos(a)*r;
    px2 = cx+Math.sin(a)*(r+5);
    py2 = cy+Math.cos(a)*(r+5);

    //draw line between (px1,py1) and (px2,py2)
};

答案 1 :(得分:2)

查看CoolClock的源代码。

答案 2 :(得分:1)

你应该阅读基本的三角学,并专注于Quadrants来实现这一目标。