HTML5 Canvasのカメラ／ビューポートを実装・操作する方法を徹底解説

HTML5 Canvasでビューポート（カメラ）を操作する基本

HTML5 Canvasでカメラやビューポート（画面に見える範囲）を実装する場合、drawImage()メソッドを活用するのが最も一般的で効率的な方法です。背景画像の一部を切り取って表示領域に描画することで、広大なマップの中をスクロールしながら移動するような演出を簡単に実現できます。

drawImage()メソッドの構文

9つの引数を持つdrawImage()を使用すると、元画像の任意の矩形領域を切り出し、Canvas上の指定した位置とサイズで描画することが可能です。

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

• sx, sy： 切り出し元画像の左上座標（カメラ位置に相当）
• sWidth, sHeight： 切り出す領域の幅と高さ（ビューポートサイズ）
• dx, dy： Canvas上の描画先座標
• dWidth, dHeight： 描画時の幅と高さ

実装例：ビューポートの描画

まず、前フレームの描画内容をclearRect()でクリアし、その後に背景画像の必要な部分だけを切り出して描画します。

ctx.clearRect(0, 0, game.width, game.height);

// 背景画像全体ではなく、必要な範囲だけを切り出して描画
ctx.drawImage(background, cropLeft, cropTop, cropWidth, cropHeight,
              0, 0, viewWidth, viewHeight);

ゲームへの応用例

実際のゲーム開発では、getElementById()でCanvas要素を取得し、2Dコンテキストを通じてビューポート処理を行います。以下は背景の一部を表示しつつ、円形のオブジェクトを重ねて描画する例です。

// Canvas要素とコンテキストの取得
var myGame = document.getElementById("game");
var myCtx = myGame.getContext("2d");

// 描画内容のクリア
myCtx.clearRect(0, 0, game.width, game.height);

// drawImage()で背景の一部を切り出して表示
myCtx.drawImage(background, left, top, 350, 250, 0, 0, 250, 150);

// 円形のオブジェクトを描画
myCtx.beginPath();
myCtx.arc(130, 80, 12, 0, Math.PI * 2, false);
myCtx.closePath();
myCtx.fill();
myCtx.stroke();

カメラ移動を実現するポイント

cropLeftやcropTopなどの値をゲームループ内で更新することで、カメラがワールド空間を移動しているように見せることができます。たとえば、プレイヤーキャラクターの座標に追従してこれらの値を変化させれば、横スクロール型のアクションゲームなどに必要なカメラ機能が完成します。毎フレームclearRect()で画面をリセットし、drawImage()で再描画するという流れを繰り返すのが基本的なパターンです。