HTML5 Canvasで画像の一部を切り抜いて描画する方法

HTML5 Canvasで画像の一部を切り抜いて描画する方法

HTML5のCanvasでは、drawImage()メソッドを使うことで、画像全体だけでなく画像の一部(切り抜いた領域)を自由に描画できます。ゲーム開発でスプライトシートから特定のキャラクター画像を取り出して表示する場合などに特に便利なテクニックです。

なお、画像のonloadイベントは、ブラウザに画像が最初に読み込まれたときに一度だけ発生するという点に注意が必要です。詳細は後述します。

drawImage()メソッドの基本構文

画像の一部を描画するには、引数を9つ指定します。

ctx.drawImage(img, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

• img: 描画元となるImageオブジェクト
• sx / sy: 元画像から切り抜く領域の開始座標(X・Y)
• sWidth / sHeight: 切り抜く領域の幅と高さ
• dx / dy: キャンバス上での描画位置(X・Y)
• dWidth / dHeight: 描画時の幅と高さ(拡大・縮小も可能)

最初の5つの引数で「元画像のどの部分を切り取るか」を指定し、残りの4つで「キャンバスのどこにどんなサイズで配置するか」を指定するイメージです。

実装例：タンク画像の一部を描画して移動させる

以下は、スプライトシートからタンク画像の一部を切り出し、一定間隔で横方向に移動させながら描画するサンプルコードです。

$(document).ready(function () {
    var cw = 200;   // キャンバスの幅
    var ch = 300;   // キャンバスの高さ
    var ctx = $("#myCanvas")[0].getContext("2d");

    var tankImg = new Image();
    tankImg.src = "https://oi62.tinypic.com/148yf7.jpg";

    var fps = 60;   // 描画フレームレート

    var playerTank = {
        x: cw / 2,      // 初期X座標(中央)
        w: 85,          // 切り出す画像の幅
        h: 85,          // 切り出す画像の高さ
        pos: 3,         // スプライトシート内のコマ番号
        draw: function () {
            // (pos * w, 0) の位置から w×h の領域を切り抜いて描画
            ctx.drawImage(tankImg,
                this.pos * this.w, 0, this.w, this.h,   // 切り抜き元
                this.x, ch - this.h, this.w, this.h);   // 描画先
        }
    };

    var game = setInterval(function () {
        if (tankImg.complete) {     // 画像の読み込み完了を確認
            playerTank.draw();
            playerTank.x++;         // 少しずつ右へ移動
        }
    }, 1000 / fps);
});

ポイント:onloadは一度しか発火しない

画像のonloadイベントは、ブラウザへ画像が最初にロードされたタイミングでのみ一度発生します。そのため、setInterval()などによるアニメーションループの中で繰り返し描画を行いたい場合は、上記の例のようにcompleteプロパティで読み込み状態を毎回チェックする方法が有効です。

別の方法としては、onloadコールバック内でアニメーションループを開始するやり方もあります。どちらの手法でも、画像の読み込みが完了していない状態でdrawImage()を呼び出してしまうエラーを防ぐことができます。