CanvasRenderingContext2D: reset() 方法

基线 2023

新功能

自 2023 年 12 月起，此功能在最新的设备和浏览器版本中均可使用。此功能可能在较旧的设备或浏览器中无法使用。

Canvas 2D API 的 **CanvasRenderingContext2D.reset()** 方法将渲染上下文重置为其默认状态，从而可以重复使用它来绘制其他内容，而无需显式重置所有属性。

重置将清除后备缓冲区、绘图状态堆栈、任何已定义的路径和样式。这包括当前的变换矩阵、合成属性、剪切区域、虚线列表、线条样式、文本样式、阴影、图像平滑、滤镜等。

语法

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

浏览器兼容性

BCD 表格仅在启用了 JavaScript 的浏览器中加载。

另请参阅

定义此方法的接口：CanvasRenderingContext2D