CanvasRenderingContext2D:reset() 方法

Baseline 2023

Newly available

Since December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

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

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

语法

js
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 上下文,并定义了可以使用该上下文绘制矩形和圆形的函数。

js
// 获取 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() 方法以清除上下文。

js
drawRect();

// 使用按钮在圆形和矩形之间切换
let toggle = true;
const mybutton = document.getElementById("toggle-reset");

mybutton.addEventListener("click", () => {
  ctx.reset(); // 清除上下文!
  if (toggle) {
    drawCircle();
  } else {
    drawRect();
  }
  toggle = !toggle;
});

结果如下所示:

规范

Specification
HTML Standard
# dom-context-2d-reset

浏览器兼容性

BCD tables only load in the browser

参见