save() を for() の外に出すと動作しなくなるのはなぜですか?

restore() の数だけ save() を行う必要があります。
2021年5月5日
ユーザー

下記コードについて質問させてください。

for (let angle = 0; angle < 360; angle += 6) {
  ctx.save();

  ctx.translate(width / 2, height / 2);
  ctx.rotate(Math.PI / 180 * angle);

  ctx.beginPath();
  ctx.moveTo(0, -this.r);
  ctx.lineTo(0, -this.r + 5);
  ctx.stroke();

  ctx.restore();
}

「繰り返し処理が少なくなれば」と軽い気持ちでsave()部分をforの外に出してみたのですが、うまく動きません…。

//修正1 → 0°、6°、180°地点のみに描画される
ctx.save();

for (let angle = 0; angle < 360; angle += 6) {
//以下略

また、下記のような順番にしてforの外に出してもうまく動きませんでした。

//修正2 → 始点のみがsaveされた動作。rotateがsave、restoreされない
ctx.translate(width / 2, height / 2);
ctx.save();

for (let angle = 0; angle < 360; angle += 6) {
//以下略

クラス分けの都合上、save()以下がforの中にあったほうがいいのは理解しています。
save()restore()の動作だけに注目した場合、なにが原因でうまく動かないのでしょうか?

この回答を見るにはプレミアムプランへの登録が必要です

プレミアムプランとは?

このレッスンの質問と回答(2)