清除画布 - Javascript

在使用 Canvas 绘图时，经常需要清空画布。本篇文章将介绍如何使用 Javascript 清除 Canvas 上的绘图内容。

1. 使用 clearRect 方法清除画布

Canvas 提供了一个方法 clearRect，可以用来清除指定矩形区域内的所有像素。该方法需要传入四个参数，依次为清除区域的左上角 x 坐标、左上角 y 坐标、矩形区域的宽度和高度。以下是一个示例代码：

const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');

context.clearRect(0, 0, canvas.width, canvas.height);

以上代码可以清空整个画布。如果只需要清空部分画布，可以根据需求传入不同的参数值。

需要注意的是，clearRect 方法会清除指定区域内的所有像素，不仅包括前景色和背景色，也包括之前绘制的图形和文本等。

2. 使用 fillRect 方法填充背景色清除画布

除了使用 clearRect 方法，还可以使用 fillRect 方法填充指定颜色清除画布。该方法需要传入四个参数，依次为背景色的左上角 x 坐标、左上角 y 坐标、矩形区域的宽度和高度。以下是一个示例代码：

const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');

context.fillStyle = 'white';
context.fillRect(0, 0, canvas.width, canvas.height);

以上代码将画布背景色填充为白色，从而实现清空画布的效果。

3. 总结

本文介绍了如何使用 Javascript 清除 Canvas 画布上的绘图内容，包括使用 clearRect 方法和 fillRect 方法。需要根据具体需求选择不同的方法进行清除画布操作。