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

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);
}

如您所见，我将指标一一绘制(以十五分钟为间隔)。

我想以五分钟的间隔绘制它..

是否有任何友好的for循环/数学来做到这一点？

感谢您的宝贵时间。

<小时/>

编辑:仅编辑至 share the result .

Answer 1

为此，您需要一些三 Angular 学和 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));
}