canvas 中的時鍾循環數

Question

晚上好。

誰能解釋為什么，在 canvas.translate(0, -canvasRadius * 0.8); 之后我們需要使用 canvas.rotate(-ang) 嗎？

我假設這是為了“返回”到原來的 0 position。 但不清楚后面的行是做什么用的。

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以正確的方式向上。

剩余的旋轉和平移反轉先前的操作並重新定位回原點，為下一次迭代做好准備。