JavaScriptのCanvasのsave()とrestore()関数の使い方

キャンバスの状態を保存するsave()関数と、 保存した状態を復元するrestore()関数の使い方をやっていきます。 以下の順序でやります。 このような流れでJavaScriptを記述しました。一番最後にCodePenを表示しますので、そこで確認できます。 （１）塗りつぶしの色と、座標系を保存

  ctx = canvas.getContext("2d");
  ctx.fillStyle = "#00ffff";

  ctx.beginPath();
  ctx.arc(0, 0, 30, 0, 2*Math.PI);
  ctx.closePath();
  ctx.fill();
  ctx.save();

まずfillStyle = “#00ffff”;で、シアン色の塗りつぶし色を設定しています。 座標系は何もしないデフォルト状態なので左上隅の座標が(0,0)となっています。 この状態で、円を1つ描画します。・・・① 1つ目は(0,0)を中心とした半径30の円（左上隅が0，0なので見切れてしまう） このタイミングで、ctx.save()を使って描画状態を保存します。 （２）塗りつぶしの色と、座標系を移動

  ctx.fillStyle = "#ff99cc";
  ctx.translate(200, 50);
 
  ctx.beginPath();
  ctx.arc(0, 0, 40, 0, 2*Math.PI);
  ctx.closePath();
  ctx.fill();

次に、fillStyle = “#ff99cc”;で、塗りつぶしをピンク色に設定します。 また、translate(200,50)で、座標軸を右へ200下へ50移動させました。 ここで(0,0)を中心とした半径40のピンクの円を描画します。・・・② （３）塗りつぶしの色と、座標系を元に戻す

 ctx.restore();
  
  ctx.beginPath();
  ctx.arc(200, 50, 30, 0, 2*Math.PI);
  ctx.closePath();
  ctx.fill();

ctx.restore();を使って描画状態を復元します これにより塗りつぶしの色がシアン色になって、座標軸が元に戻った（左上が0,0）はずです。 ここで(200,50)を中心とした半径30の少し小さめの円を描画しました・・・③ すると、色も座標も元に戻ったのがわかります。

See the Pen canvas-save-restore by pghappy (@pghappy) on CodePen.

---

プログラミング学習を体系的に進めたい人へ

独学で基礎を確認したあとに、質問できる環境や転職・副業向けの学習サポートも比べたい人は、プログラミングスクールの比較記事も参考にしてください。学習目的、料金、受講期間、サポート範囲を分けて見ると、自分に合う学び方を選びやすくなります。

• プログラミングスクール総合ランキング
• プログラミングスクール一覧
• プログラミング独学の進め方