在时钟中以五分钟为间隔绘制指标

Question

我正在学习canvas，我正在尝试画一个时钟..

到目前为止，I have this:

var canvas = document.createElement("canvas");
canvas.width = 100;
canvas.height = 100;
document.body.appendChild(canvas);

if (!canvas.getContext) {
    console.log("Good morning! .. Please check your canvas");
}
else {
    var ctx = canvas.getContext("2d");

    var path = new Path2D();

    // outer border
    path.moveTo(100,50);
    path.arc(50,50,50,0,Math.PI*2,true);

    // inner border
    path.moveTo(97,50);
    path.arc(50,50,47,0,Math.PI*2,true);

    // indicators: fifteen in fifteen minutes
    path.lineTo(90,50);
    path.moveTo(3,50);
    path.lineTo(10,50);
    path.moveTo(50,3);
    path.lineTo(50,10);
    path.moveTo(50,97);
    path.lineTo(50,90);

    // show canvas
    ctx.stroke(path);
}

如你所见，我把指标一个一个画出来了（间隔十五分钟）。

我想每隔 5 分钟 ..

画一次

有能干的for-loop/mathematic吗？

感谢您的宝贵时间。

编辑：只是 share the result.

Answer 1

为此你需要一些三角函数和 for 循环。

你可能知道圆的定义是所有的点，比如 P(cos(x),sin(x))。在这种情况下，sin 和 cos 函数中的 x 值必须计算如下：

x=50+50*Math.cos((i/numticks)*2*Math.PI)

那么这一切意味着什么？

前 50 个将圆移动到 canvas 的圆心。
(i/numticks) 将刻度数缩放到 0 到 1 的范围

然后我们将所有这些乘以 2*Pi，得到 sin 和 cos 的参数。

var numticks=12
for(var i = 0;i <= numticks;i++) {
   path.moveTo(50+50*Math.cos((i/numticks)*2*Math.PI),50+50*Math.sin((i/numticks)*2*Math.PI));
   path.lineTo(50+45*Math.cos((i/numticks)*2*Math.PI),50+45*Math.sin((i/numticks)*2*Math.PI));
}

在时钟中以五分钟为间隔绘制指标

Draw indicators in five minutes interval in a clock

javascript

math

html5-canvas