Canvas清空画布

当我们需要在HTML5的Canvas中清空画布时，可以使用多种方法来实现。最直接的方式是通过设置canvas的宽度和高度来重置画布内容，或者使用clearRect方法清除指定区域的内容。

下面将几种清空Canvas画布的方法，并提供相应的代码示例。

方法一：重置Canvas尺寸

这是最简单且有效的一种方法。通过重新设置Canvas的宽度或高度，可以让画布内容被自动清除。这是因为Canvas在调整尺寸时会重置其绘图上下文。

javascript
// 获取Canvas元素和上下文
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');</p>

<p>// 绘制一些内容（例如一个矩形）
ctx.fillStyle = 'blue';
ctx.fillRect(10, 10, 100, 100);</p>

<p>// 清空画布
canvas.width = canvas.width; // 通过重新设置宽度来清空画布

注意：这种方法虽然简单，但它会重置整个Canvas的状态，包括样式、变换矩阵等信息。如果需要保留这些状态，则需考虑其他方法。

方法二：使用clearRect方法

clearRect方法可以清除Canvas上的指定区域，使其变为透明。如果要清空整个画布，只需传递画布的宽度和高度作为参数。

javascript
// 获取Canvas元素和上下文
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');</p>

<p>// 绘制一些内容（例如一个矩形）
ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 100, 100);</p>

<p>// 使用clearRect清空画布
ctx.clearRect(0, 0, canvas.width, canvas.height);

此方法不会影响Canvas的状态，仅清除指定区域的内容。

方法三：填充透明颜色

另一种清空画布的方法是用透明颜色填充整个画布。这可以通过fillStyle和fillRect方法实现。

javascript
// 获取Canvas元素和上下文
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');</p>

<p>// 绘制一些内容（例如一个圆形）
ctx.beginPath();
ctx.arc(75, 75, 50, 0, Math.PI * 2);
ctx.fillStyle = 'green';
ctx.fill();</p>

<p>// 填充透明颜色以清空画布
ctx.fillStyle = 'rgba(0,0,0,0)';
ctx.fillRect(0, 0, canvas.width, canvas.height);

这种方法的效果与clearRect类似，但有时可能更适合特定场景，例如需要覆盖复杂背景的情况。

根据实际需求选择合适的方法非常重要。如果只需要快速清空画布，推荐使用重置尺寸的方法；如果需要保留Canvas状态，则可以选择clearRect或透明填充的方法。