JavaScript、HTML、Canvasでキャンバスをクリアして再描画する方法

2024-04-02

キャンバスをクリアして再描画する方法（JavaScript、HTML、Canvas）

HTML

まず、HTMLファイルにCanvas要素を追加する必要があります。

<canvas id="myCanvas" width="500" height="500"></canvas>

id属性は、JavaScriptからCanvas要素を取得するために使用されます。 widthとheight属性は、Canvas要素の幅と高さをピクセル単位で指定します。

JavaScript

次に、JavaScriptファイルでCanvas要素を取得し、描画コンテキストを取得する必要があります。

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

ctx変数は、Canvas要素に描画するために使用されます。

キャンバスをクリアするには、clearRect()メソッドを使用します。

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

このコードは、キャンバスの左上隅から右下隅まで、キャンバス全体をクリアします。

再描画

キャンバスをクリアした後、beginPath()、moveTo()、lineTo()、stroke()などのメソッドを使用して、新しい図形を描画できます。

以下は、キャンバスに赤い矩形を描画する例です。

ctx.beginPath();
ctx.moveTo(10, 10);
ctx.lineTo(100, 10);
ctx.lineTo(100, 100);
ctx.lineTo(10, 100);
ctx.closePath();
ctx.strokeStyle = "red";
ctx.stroke();

このチュートリアルでは、JavaScript、HTML、Canvasを使用して、キャンバスをクリアして再描画する方法を説明しました。

このチュートリアルで学んだことを活用して、さまざまな図形を描画したり、アニメーションを作成したりすることができます。

補足

clearRect()メソッドは、指定した矩形領域のみをクリアすることができます。
save()とrestore()メソッドを使用して、描画状態を保存したり復元したりすることができます。
globalCompositeOperationプロパティを使用して、描画の合成方法を指定することができます。

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

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

    // ボタンクリック時の処理
    document.getElementById("clearButton").addEventListener("click", () => {
      // キャンバスをクリア
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      // 再描画
      draw();
    });

    // 初期描画
    draw();

    function draw() {
      // 矩形を描画
      ctx.beginPath();
      ctx.moveTo(10, 10);
      ctx.lineTo(100, 10);
      ctx.lineTo(100, 100);
      ctx.lineTo(10, 100);
      ctx.closePath();
      ctx.strokeStyle = "red";
      ctx.stroke();
    }
  </script>

  <button id="clearButton">クリア</button>
</body>
</html>

このコードを実行すると、ブラウザに500x500ピクセルのキャンバスが表示されます。

「クリア」ボタンをクリックすると、キャンバスがクリアされ、赤い矩形が再描画されます。

このコードを参考に、さまざまな図形を描画したり、アニメーションを作成したりしてみてください。

キャンバスをクリアして再描画する他の方法

fillRect()メソッドを使用する

ctx.fillRect(0, 0, canvas.width, canvas.height);

この方法は、clearRect()メソッドよりもわずかに高速ですが、透明な背景をクリアするには使用できません。

Canvas要素を新しい要素に置き換えることで、キャンバスをクリアすることができます。

const newCanvas = document.createElement("canvas");
newCanvas.width = canvas.width;
newCanvas.height = canvas.height;

canvas.parentNode.replaceChild(newCanvas, canvas);

// 新しいキャンバスへの描画処理

この方法は、他の方法よりも複雑ですが、すべての状況で使用することができます。