html5清空画布方法（三种）

在数字艺术的世界中，canvas画布承载了无数创造力和想象力的火花。有时，我们需要清空画布，为新的创作腾出空间。以下是三种常用的清空canvas画布的方法。

方法一：重置高度与宽度。这是一种最简单的方法，只需轻轻一点，canvas画布就会恢复如初。每当canvas的高度或宽度被重新设定时，画布上的内容就会自动清空。就像这样：

```javascript

function clearCanvas() {

var c = document.getElementById("myCanvas");

var cxt = c.getContext("2d");

c.height = c.height;

}

```

方法二：使用clearRect方法。这个方法就像是画布的“橡皮擦”，它能将画布上的内容全部擦除，只留下一个干净的画布等待新的创作。代码如下：

```javascript

function clearCanvas() {

var c = document.getElementById("myCanvas");

var cxt = c.getContext("2d");

cxt.clearRect(0, 0, c.width, c.height);

}

```

方法三：用特定颜色填充画布。除了完全清空画布，我们也可以选择用某一颜色来填充画布，从而达到清空的效果。这种方法适用于想要保留部分背景色的情况。实现方法如下：

```javascript

function clearCanvas() {

var c = document.getElementById("myCanvas");

var cxt = c.getContext("2d");

cxt.fillStyle = "000000"; // 设置填充颜色为黑色

cxt.beginPath(); // 开始路径

cxt.fillRect(0, 0, c.width, c.height); // 用设定的颜色填充整个画布

cxt.closePath(); // 结束路径

}

```

以上就是清空canvas画布的三种方式，希望对你的创作有所帮助。在每一次的清空与重绘中，都蕴含着无限的可能与创意。多多支持我们的分享，一起数字艺术的边界。感谢大家的关注与支持，期待你的每一次创意绽放。请多多关注狼蚁SEO，让我们一起学习进步，共同成长。记得在创作中，清空画布是为了更好的开始！