CanvasRenderingContext2D: reset() 方法

Baseline 2023

新推出

自 ⁨2023 年 12 月⁩起，此功能可在最新的裝置和瀏覽器版本上使用。此功能可能無法在較舊的裝置或瀏覽器上使用。

CanvasRenderingContext2D.reset() 方法是 Canvas 2D API 的一部分，它會將渲染上下文重置為其預設狀態，這樣就可以在不顯式重置所有屬性的情況下，將其重新用於繪製其他內容。

重置會清除後備緩衝區、繪製狀態堆疊、任何已定義的路徑和樣式。這包括當前的變換矩陣、混合屬性、剪裁區域、虛線列表、線條樣式、文字樣式、陰影、影像平滑、濾鏡等等。

語法

reset()

引數

無。

返回值

無（undefined）。

示例

本示例展示瞭如何使用 reset() 在重新繪製之前完全清除上下文。

首先，我們定義一個按鈕和一個畫布。

css

#toggle-reset {
  display: block;
}

html

<button id="toggle-reset">Toggle</button>
<canvas id="my-house" width="500" height="200"></canvas>

程式碼首先獲取畫布的 2d 上下文。然後定義了可以分別使用該上下文繪製矩形和圓形的函式。

// Get the 2d context
const canvas = document.getElementById("my-house");
const ctx = canvas.getContext("2d");

function drawRect() {
  // Set line width
  ctx.lineWidth = 10;

  // Stroke rect outline
  ctx.strokeRect(50, 50, 150, 100);

  // Create filled text
  ctx.font = "50px serif";
  ctx.fillText("Rect!", 70, 110);
}

function drawCircle() {
  // Set line width
  ctx.lineWidth = 5;

  // Stroke out circle
  ctx.beginPath();
  ctx.arc(300, 100, 50, 0, 2 * Math.PI);
  ctx.stroke();

  // Create filled text
  ctx.font = "25px sans-serif";
  ctx.fillText("Circle!", 265, 100);
}

然後我們使用其函式繪製矩形。按鈕會切換繪製圓形和矩形。請注意，在繪製之前呼叫了 reset() 來清除上下文。

drawRect();

// Toggle between circle and rectangle using button
let toggle = true;
const myButton = document.getElementById("toggle-reset");

myButton.addEventListener("click", () => {
  ctx.reset(); // Clear the context!
  if (toggle) {
    drawCircle();
  } else {
    drawRect();
  }
  toggle = !toggle;
});

結果如下所示

規範

規範
HTML # dom-context-2d-reset

瀏覽器相容性

另見

定義此方法的介面：CanvasRenderingContext2D

幫助改進 MDN

瞭解如何貢獻

此頁面最後由 MDN 貢獻者於 2025年9月25日修改。

在 GitHub 上檢視此頁面 • 報告此內容的某個問題