如何擦除Canvas上以前的绘图？

在编程中，擦除画布上的绘制通常涉及到几种基本方法，这里以 HTML5 的 <canvas> 元素为例来具体说明如何操作：

1. 使用 clearRect 方法

clearRect 是 Canvas 2D API 提供的一个非常直接的方法，用于清除画布上的指定矩形区域。如果你想删除画布上的所有内容，可以将 clearRect 方法的参数设置为整个画布的宽度和高度。

示例代码：

javascript
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

// 绘制一些内容
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 50, 50);

// 擦除全部画布
ctx.clearRect(0, 0, canvas.width, canvas.height);

2. 重新设置画布的宽度或高度

设置 <canvas> 元素的宽度或高度会导致画布被完全清除。这种方法相对简单，但在某些情况下可能不太适合，因为它也会重置画布的状态（如变换矩阵、样式设置等）。

示例代码：

javascript
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

// 绘制一些内容
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 50, 50);

// 重设宽度以清空画布
canvas.width = canvas.width;

3. 使用透明颜色覆盖

这种方法不是真正的「清除」，而是用透明的颜色覆盖之前的绘图。这种方法的优点是可以实现特定区域的局部「清除」效果。

示例代码：

javascript
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

// 绘制一些内容
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 50, 50);

// 使用透明颜色覆盖
ctx.fillStyle = 'rgba(255, 255, 255, 0)'; // 完全透明
ctx.fillRect(10, 10, 50, 50);

总结

在实际开发中，选择哪种方法取决于具体需求和性能考量。如果需要频繁清除画布，考虑使用 clearRect 方法，因为它既有效又直接。如果你在重绘之前不需要保留任何状态，可以考虑重新设置画布的尺寸。对于更复杂的局部擦除，使用透明颜色覆盖可能是一个选项。