CanvasRenderingContext2D: clearRect() 方法

基线 广泛可用

此功能已得到完善，并在许多设备和浏览器版本中运行。它自 2015 年 7 月.

报告反馈

**CanvasRenderingContext2D.clearRect()** 方法是 Canvas 2D API 的一种方法，通过将像素设置为透明黑色来擦除矩形区域中的像素。

语法

**注意：** 请注意，如果您没有正确使用路径，则 clearRect() 可能导致意外的副作用。确保在调用 clearRect() 后，在开始绘制新项目之前调用 beginPath()。
clearRect(x, y, width, height)

js

clearRect() 方法将矩形区域中的像素设置为透明黑色 (rgb(0 0 0 / 0%))。矩形的左上角位于 (x, y) 处，其大小由 width 和 height 指定。

参数

x

矩形起点在 x 轴上的坐标。

y

矩形起点在 y 轴上的坐标。

width

矩形的宽度。正值表示向右，负值表示向左。

height

矩形的高度。正值表示向下，负值表示向上。

返回值

示例

无 (undefined).

擦除整个画布

**注意：** 请注意，如果您没有正确使用路径，则 clearRect() 可能导致意外的副作用。确保在调用 clearRect() 后，在开始绘制新项目之前调用 beginPath()。
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);

此代码片段会擦除整个画布。这通常在动画的每一帧开始时需要。已清除区域的尺寸设置为等于 <canvas> 元素的 width 和 height 属性。

擦除画布的一部分

HTML

此示例在黄色背景之上绘制一个蓝色三角形。然后，clearRect() 方法会擦除画布的一部分。
<canvas id="canvas"></canvas>

JavaScript

html

**注意：** 请注意，如果您没有正确使用路径，则 clearRect() 可能导致意外的副作用。确保在调用 clearRect() 后，在开始绘制新项目之前调用 beginPath()。
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// Draw yellow background
ctx.beginPath();
ctx.fillStyle = "#ff6";
ctx.fillRect(0, 0, canvas.width, canvas.height);

// Draw blue triangle
ctx.beginPath();
ctx.fillStyle = "blue";
ctx.moveTo(20, 20);
ctx.lineTo(180, 20);
ctx.lineTo(130, 130);
ctx.closePath();
ctx.fill();

// Clear part of the canvas
ctx.clearRect(10, 10, 120, 100);

已清除区域呈矩形形状，左上角位于 (10, 10) 处。已清除区域的宽度为 120，高度为 100。

规范

结果
规范
# HTML 标准

浏览器兼容性

dom-context-2d-clearrect-dev

另请参阅