CanvasRenderingContext2D.clearRect() - Web API 接口参考 编辑

CanvasRenderingContext2D.clearRect()是Canvas 2D API的方法，这个方法通过把像素设置为透明以达到擦除一个矩形区域的目的。

注意: 如果没有依照 绘制路径 的步骤，使用 clearRect() 会导致意想之外的结果。请确保在调用 clearRect()之后绘制新内容前调用beginPath() 。

语法

void ctx.clearRect(x, y, width, height);

 clearRect() 方法在一个矩形区域内设置所有像素都是透明的(rgba(0,0,0,0))。这个矩形范围的左上角在 (x, y)，宽度和高度分别由 width 和height确定。

参数

x

矩形起点的 x 轴坐标。

y

矩形起点的 y 轴坐标。

width

矩形的宽度。

height

矩形的高度。

示例

清除整个画布

这段代码清除整个画布。这段代码通常在动画的每一帧开始被执行。清除的范围涵覆盖了整个 <canvas> 元素。

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像素。

var canvas = document.getElementById("canvas");
var 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);

结果

规范描述

Specification	Status	Comment
HTML Living Standard CanvasRenderingContext2D.clearRect	Living Standard

浏览器兼容性

BCD tables only load in the browser

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

参见

• 接口定义， CanvasRenderingContext2D
• CanvasRenderingContext2D.fillRect()
• CanvasRenderingContext2D.strokeRect()