[JavaScript] 2D 描画の基本テクニック：save,restore,translate,scale

2D 描画の基本テクニック

ゲーム開発やアニメーションの描画処理において、座標系の操作や描画状態の管理は非常に重要です。ctx.save() と ctx.restore()、ctx.translate() と ctx.scale() は、描画の状態を管理したり、座標系を変更したりするための強力なツールです。これらの基本的な使い方をサンプルコードを使って解説します。

1. ctx.save() と ctx.restore()

• ctx.save(): 現在の描画設定（座標、スケーリング、色など）を保存します。
• ctx.restore(): 保存された描画設定を元に戻します。

これを使うことで、一時的な設定変更を特定の部分に適用し、その後に元に戻すことができます。

サンプルコード：ctx.save() と ctx.restore() の使い方

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

// 描画状態を保存
ctx.save();

// 色を変更して矩形を描画
ctx.fillStyle = "blue";
ctx.fillRect(50, 50, 100, 100);

// 状態を元に戻す
ctx.restore();

// 色を元に戻して、別の矩形を描画
ctx.fillStyle = "red";
ctx.fillRect(200, 50, 100, 100);

• ctx.save() で現在の描画状態（色、座標、スケーリングなど）を保存します。
• その後、ctx.restore() で設定を元に戻し、別の色で描画を行います。

この方法を使うことで、一時的に描画設定を変更し、他の描画には影響を与えないようにできます。

2. ctx.translate() と ctx.scale()

• ctx.translate(x, y): 座標系を (x, y) の分だけ移動させます。
• ctx.scale(x, y): 座標系を x 軸と y 軸で拡大・縮小します。scale(-1, 1) とすることで、左右反転も可能です。

これらの関数を使うことで、座標系を移動させたり、描画を反転させたりできます。

サンプルコード：ctx.translate() と ctx.scale() の使い方

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

// 座標系を移動
ctx.translate(100, 100);

// 反転処理
ctx.scale(-1, 1); // 左右反転

// 反転後に矩形を描画
ctx.fillStyle = "green";
ctx.fillRect(0, 0, 100, 100);

// 描画後、元の座標系に戻す
ctx.setTransform(1, 0, 0, 1, 0, 0); // 元の座標系に戻す

• ctx.translate(100, 100) で描画の基準位置を右に 100px、下に 100px 移動させます。
• ctx.scale(-1, 1) で描画を左右反転させます。
• 反転した後、fillRect() で矩形を描画しますが、反転された座標系で描画されます。
• 最後に ctx.setTransform() で座標系を元に戻します。

3. まとめ

• ctx.save() と ctx.restore() は、描画設定を一時的に保存・復元するためのメソッドで、特定の描画処理にのみ影響を与えることができます。
• ctx.translate(x, y) と ctx.scale(x, y) は、座標系を移動したり反転させたりするためのメソッドです。scale(-1, 1) を使うことで、簡単に反転処理を行うことができます。

これらのテクニックを使うことで、複雑な描画操作やアニメーションを効率よく管理することができ、ゲームのパフォーマンスや描画の品質を向上させることができます。