Question

我正在学习帆布，而我正试图画一个时钟..

到目前为止，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);
}

如您所见，我逐个绘制指标（间隔十五分钟）。

我希望在五分钟的间隔内绘制..

是否有 genial 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个将圆圈移动到画布的中心。
（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));
}

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

1 个答案: