HTML | 画布 clearRect() 方法

HTML 画布（Canvas）是 HTML5 中的一个全新标签，能够通过 JavaScript 提供的 API 绘制图形，创建动画等。

Canvas 元素的 clearRect() 方法可以用来清空画布中的矩形区域，进行下一次的绘制操作。

语法

context.clearRect(x,y,width,height);

• context：画布上下文对象，可通过 canvas.getContext("2d") 方法获取。
• x：矩形左上角在目标画布上 X 轴的位置（单位像素）。
• y：矩形左上角在目标画布上 Y 轴的位置（单位像素）。
• width：矩形的宽度，以像素计（单位像素）。
• height：矩形的高度，以像素计（单位像素）。

示例

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

// 在画布上绘制一张图片
var img = new Image();
img.src = "myImage.png";
img.onload = function() {
    context.drawImage(img, 0, 0);
}

// 清空画布指定矩形区域
context.clearRect(0, 0, 50, 50);

这个例子中，我们首先在画布上绘制了一张图片，然后使用 clearRect() 方法清空了画布中左上角坐标为 (0,0)、宽度为 50 像素，高度为 50 像素的矩形区域。

注意事项

• 如果调用了 clearRect() 方法，但参数没有指定矩形大小，则画布中将会被完全清除。
• 如果指定矩形大小超过了画布范围，则该方法不会抛出错误，但任何以后的绘制操作都将被忽略。

以上就是 HTML 画布 clearRect() 方法的介绍。