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

Draw indicators in five minutes interval in a clock

本文关键字：五分钟 指示器 绘制 时钟 一个      更新时间：2023-09-26

我正在学习画布，我正在努力画一个时钟。。

现在，我有这个：

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

正如你所看到的，我一个接一个地画出了指标（间隔15分钟）。

我想以五分钟的间隔画它。。

循环/数学有什么适合这样做的吗？

谢谢你抽出时间。

编辑：只是为了分享结果。

您需要一些三角函数和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));
}
相关文章：