canvas 中的时钟循环编号

Question

晚上好。

谁能解释一下为什么，在canvas.translate(0, -canvasRadius * 0.8);之后我们需要使用 canvas.rotate(-ang)?

我假设这是要“return”到原来的0位置。但是不清楚后面几行是干什么用的

for (num = 1; num < 13; num++) {
    ang = (num * Math.PI) / 6;
    canvas.rotate(ang);
    canvas.translate(0, -canvasRadius * 0.8);
    canvas.rotate(-ang);
    canvas.fillText(num.toString(), 0, 0);
    canvas.rotate(ang);
    canvas.translate(0, canvasRadius * 0.8);
    canvas.rotate(-ang);
  }

Answer 1

看起来它旋转了 canvas 以便后续翻译位于数字的正确位置。向相反方向旋转可确保随后的 fillText 是正确的向上方向。

剩余的旋转和平移反转之前的操作并重新定位回原点，为下一次迭代做好准备。

canvas 中的时钟循环编号

Clock loop numbers in canvas

javascript

canvas