Question

在下面的代码段中

ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.arc(canvas.width / 2, canvas.height / 2, 143, (startAngle * Math.PI / 180) - Math.PI / 2, 1.5 * Math.PI);
ctx.strokeStyle = "white";
ctx.lineWidth = 14;
ctx.stroke();

其中i是6的倍数，我无法每秒更新画布（使用循环），外观应该像后退时钟一样。链接到小提琴：https://jsfiddle.net/727q1u7r/3/

Answer 1

在你的fiddle中，循环中的代码不引用startAngle，因此循环的每次迭代都绘制完全相同的东西。您可能希望在弧线调用中引用startAngle。

然而这本身还不够，for循环不适合动画，整个循环将在瞬间完成，你不会看到任何变化。

您可以使用setInterval中显示的this fiddle。

如果您尝试可靠地显示系统时间，则应考虑使用Date并可能使用requestAnimationFrame。

动态更新HTML5画布

1 个答案: