JavaScript、HTML、HTML5 Canvasを使ってウィンドウサイズに合わせてキャンバスをリサイズする方法

2024-04-12

JavaScript、HTML、HTML5 Canvas を使ってウィンドウサイズに合わせてキャンバスをリサイズする方法

必要環境

ブラウザ: Chrome、Firefox、Safari など
テキストエディタ: Visual Studio Code、Sublime Text、Notepad++ など

手順

HTML ファイルを作成し、以下のコードを追加します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML5 Canvas リサイズ</title>
</head>
<body>
  <canvas id="canvas" width="500" height="300"></canvas>

  <script src="script.js"></script>
</body>
</html>

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

// ウィンドウサイズを取得
function getWindowSize() {
  return {
    width: window.innerWidth,
    height: window.innerHeight,
  };
}

// キャンバスをリサイズ
function resizeCanvas() {
  const { width, height } = getWindowSize();
  canvas.width = width;
  canvas.height = height;

  // キャンバスに何か描画する場合はここ
  // 例: 矩形を描画
  ctx.fillStyle = "red";
  ctx.fillRect(0, 0, width, height);
}

// ウィンドウサイズ変更時にリサイズ関数を呼び出す
window.addEventListener("resize", resizeCanvas);

// 初期化
resizeCanvas();

コード解説

canvas 変数は、HTML ファイルの canvas 要素を取得します。
ctx 変数は、キャンバスの描画コンテキストを取得します。
getWindowSize 関数は、現在のウィンドウサイズを取得します。
resizeCanvas 関数は、キャンバスをウィンドウサイズに合わせてリサイズします。
window.addEventListener イベントリスナーは、ウィンドウサイズ変更時に resizeCanvas 関数を呼び出します。
ctx.fillStyle プロパティは、描画する図形のスタイルを設定します。
ctx.fillRect メソッドは、矩形を描画します。

このチュートリアルでは、JavaScript、HTML、HTML5 Canvas を使って、ウィンドウサイズに合わせてキャンバスを自動的にリサイズする方法を解説しました。

この方法を応用することで、画面サイズに合わせたゲームやアニメーション、インタラクティブなグラフィックなどを制作することができます。

補足

より複雑な描画を行う場合は、ctx オブジェクトの他のメソッドを使用することができます。
アニメーションを作成するには、requestAnimationFrame 関数を使用することができます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML5 Canvas リサイズ - サンプル</title>
</head>
<body>
  <canvas id="canvas" width="500" height="300"></canvas>

  <script src="script.js"></script>
</body>
</html>

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

// ウィンドウサイズを取得
function getWindowSize() {
  return {
    width: window.innerWidth,
    height: window.innerHeight,
  };
}

// キャンバスをリサイズ
function resizeCanvas() {
  const { width, height } = getWindowSize();
  canvas.width = width;
  canvas.height = height;

  // ランダムな矩形を描画
  for (let i = 0; i < 10; i++) {
    const x = Math.random() * width;
    const y = Math.random() * height;
    const w = Math.random() * 100;
    const h = Math.random() * 100;

    ctx.fillStyle = `rgb(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255})`;
    ctx.fillRect(x, y, w, h);
  }
}

// ウィンドウサイズ変更時にリサイズ関数を呼び出す
window.addEventListener("resize", resizeCanvas);

// 初期化
resizeCanvas();

このコードを実行すると、ウィンドウサイズに合わせてキャンバスがリサイズされ、その中にランダムな色の矩形が描画されます。

実行方法

上記のコードを HTML ファイルと JavaScript ファイルに保存します。
HTML ファイルをブラウザで開きます。

改良点

矩形の個数やサイズ、色などを変えて、よりバリエーション豊かな画面を作ることができます。
アニメーションさせる場合は、requestAnimationFrame 関数を使って、定期的に resizeCanvas 関数を実行します。
マウスやキーボード操作に対応させて、インタラクティブな作品に仕上げることもできます。

応用例

画面サイズに合わせてレイアウトが変わるWebサイト
ブラウザゲーム
アニメーション
データ可視化

ウィンドウサイズに合わせてHTML5 Canvasをリサイズする他の方法

onresize イベントを使う

HTML の body 要素に onresize イベントを設定することで、ウィンドウサイズが変更されたときにJavaScript関数を呼び出すことができます。

<body onresize="resizeCanvas()">
  ...
</body>

resizeCanvas 関数は、ウィンドウサイズを取得してキャンバスのサイズをそれに合わせて変更します。

function resizeCanvas() {
  const canvas = document.getElementById("canvas");
  const width = window.innerWidth;
  const height = window.innerHeight;
  canvas.width = width;
  canvas.height = height;
  // ... キャンバスへの描画処理 ...
}

CSSの vh と vw を使って、キャンバスのサイズをウィンドウの高さ・幅の割合で指定できます。

<canvas id="canvas" style="width: 100vw; height: 100vh;"></canvas>

この方法を使うと、ウィンドウサイズが変更されたときに、キャンバスが自動的にそれに合わせてリサイズされます。

JavaScriptの requestAnimationFrame を使う

requestAnimationFrame 関数を使って、ブラウザのフレームレートに合わせてアニメーションを更新することができます。

function resizeCanvas() {
  const canvas = document.getElementById("canvas");
  const width = window.innerWidth;
  const height = window.innerHeight;
  canvas.width = width;
  canvas.height = height;
  // ... キャンバスへの描画処理 ...

  requestAnimationFrame(resizeCanvas);
}

window.addEventListener("load", resizeCanvas);

ライブラリを使う

resize-observer-polyfill などのライブラリを使うと、ウィンドウサイズの変更をより簡単に監視できます。

const resizeObserver = new ResizeObserver((entries) => {
  for (const entry of entries) {
    const canvas = entry.target;
    const width = entry.contentRect.width;
    const height = entry.contentRect.height;
    canvas.width = width;
    canvas.height = height;
    // ... キャンバスへの描画処理 ...
  }
});

resizeObserver.observe(canvas);