CanvasRenderingContext2D.clearRect()

The CanvasRenderingContext2D.clearRect() 是 Canvas 2D API 设置指定矩形区域内(以 点 (x, y) 为起点,范围是(width, height) )所有像素变成透明,并擦除之前绘制的所有内容的方法。

Note: Be aware that clearRect() may cause unintended side effects if you're not using paths properly. Make sure to call beginPath() before starting to draw new items after calling clearRect().

语法

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

The clearRect() method sets the pixels in a rectangular area to transparent black (rgba(0,0,0,0)). The rectangle's corner is at (x, y), and its size is specified by width and height.

参数

x
矩形起点的 x 轴坐标。
y
矩形起点的 y 轴坐标。
width
矩形的宽度。
height
矩形的高度。

示例

清除整个画布

这段代码清除整个画布. This is commonly required at the start of each frame in an animation. The dimensions of the cleared area are set to equal the <canvas> element's width and height attributes.

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

The cleared area is rectangular in shape, with its top-left corner at (10, 10). The cleared area has a width of 120 and a height of 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

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
clearRectChrome Full support YesEdge Full support 12Firefox Full support 1.5IE Full support YesOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesFirefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support

参见