CanvasRenderingContext2D：clearRect() 方法

语法

clearRect(x, y, width, height)

clearRect() 方法在一个矩形区域内将所有像素都设置成透明黑色（rgba(0,0,0,0)）。矩形区域的左上角在 (x, y)，其大小由 width 和height 指定。

参数

x

矩形起点的 x 轴坐标。

y

矩形起点的 y 轴坐标。

width

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

height

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

返回值

无（undefined）。

示例

擦除整个画布

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

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);

擦除一部分画布

此示例在黄色背景上绘制了一个蓝色三角形，然后使用 clearRect() 方法擦除了画布的部分内容。

HTML

<canvas id="canvas"></canvas>

JavaScript

被清除的区域是一个矩形，它的左上点坐标在 (10, 10)。清除区域的宽度为 120，高度为 100。

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// 绘制黄色背景
ctx.beginPath();
ctx.fillStyle = "#ff6";
ctx.fillRect(0, 0, canvas.width, canvas.height);

// 绘制蓝色三角形
ctx.beginPath();
ctx.fillStyle = "blue";
ctx.moveTo(20, 20);
ctx.lineTo(180, 20);
ctx.lineTo(130, 130);
ctx.closePath();
ctx.fill();

// 清除一部分画布
ctx.clearRect(10, 10, 120, 100);

结果

规范

浏览器兼容性

参见

• 定义此方法的接口：CanvasRenderingContext2D
• CanvasRenderingContext2D.fillRect()
• CanvasRenderingContext2D.strokeRect()