CanvasRenderingContext2D: reset() メソッド

Baseline 2023

構文

reset()

引数

None.

返値

なし (undefined)。

例

この例は、再描画前にコンテキストを完全にクリアするために reset() をどのように使用できるかを示しています。

まずボタンとキャンバスを定義します。

css

#toggle-reset {
  display: block;
}

html

<button id="toggle-reset">切り替え</button>
<canvas id="my-house" width="500" height="200"></canvas>

コードはまず、キャンバス用の 2d コンテキストを取得します。次に、それぞれ矩形と円を描画するためにコンテキストを使用することができる関数を定義します。

// 2D コンテキストを取得
const canvas = document.getElementById("my-house");
const ctx = canvas.getContext("2d");

function drawRect() {
  // 線の幅を設定
  ctx.lineWidth = 10;

  // 矩形のアウトラインを描画
  ctx.strokeRect(50, 50, 150, 100);

  // 塗りつぶしのテキストを作成
  ctx.font = "50px serif";
  ctx.fillText("Rect!", 70, 110);
}

function drawCircle() {
  // 線の幅を設定
  ctx.lineWidth = 5;

  // 円を描画
  ctx.beginPath();
  ctx.arc(300, 100, 50, 0, 2 * Math.PI);
  ctx.stroke();

  // 塗りつぶしのテキストを作成
  ctx.font = "25px sans-serif";
  ctx.fillText("Circle!", 265, 100);
}

次に、その関数を使用して矩形を描画します。ボタンは円と矩形の描画を切り替えます。描画前にコンテキストをクリアするために reset() が呼び出されている点に注意してください。

drawRect();

// ボタンを使用して円と矩形を切り替え
let toggle = true;
const myButton = document.getElementById("toggle-reset");

myButton.addEventListener("click", () => {
  ctx.reset(); // コンテキストをクリア
  if (toggle) {
    drawCircle();
  } else {
    drawRect();
  }
  toggle = !toggle;
});

結果は次のようになります。