javascript - 每隔五分钟绘制一次指示器

我正在学习画布，并且试图绘制一个时钟。

现在，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。

最佳答案

您需要一些三角函数和一个for循环。

您可能知道圆定义为所有点，例如P（cos（x），sin（x））。
在这种情况下，sin和cos函数中的x值必须按以下方式计算：

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

那么，这意味着什么？


前50个将圆圈移动到画布的中心。
（i / numticks）将刻度数缩放为0到1的范围


然后我们将所有这些乘以2 * Pi，得出正弦和余弦的参数。

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

关于javascript - 每隔五分钟绘制一次指示器，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31162672/