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
# dom-context-2d-reset

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
reset

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见