12.6 HTML 画板擦除

优质

小牛编辑

134浏览

2023-12-01

在Canvas上绘制确实是很有趣的事情，但当你画错了或者想要清除画布和绘制其他图形时，应该如何做呢？有两个方法可以使用：1.clearRect方法和2.重新设置画布宽高。我们首先学习2D渲染上下文的clearRect方法。

clearRect方法

假设你在Canvas上只画了一个正方形和圆形：

context.fillRect(40, 40, 100, 100); 
    context.beginPath(); 
    context.arc(230, 90, 50, 0, Math.PI*2, false); 
    context.closePath();
    context.fill();

然后，可以随时清除Canvas。要执行这个操作，只需要使用Canvas的原点坐标(x．y)、宽度和高度调用clearRect。如果Canvas宽500像素高500像素，那么可以按照以下方式调用clearRect：

context.clearRect(0, 0, 500, 500);

当运行时，它在浏览器上不会显示任何内容，因为刚刚清除了Canvas的所有内容。甚至，即使不知道Canvas尺寸，也可以使用jQuery的width和height方法来调用clearRect，方法如下：

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

完整的例子如下所示：

var canvas = $("#myCanvas"); 
    var context = canvas.get(0).getContext("2d"); 
    context.fillRect(40, 40, 100, 100); 
    context.beginPath(); 
    context.arc(230, 90, 50, 0, Math.PI*2, false); 
    context.closePath(); 
    context.fill(); 
    context.clearRect(0, 0, canvas.width(), canvas.height());

我在这个例子中加入了原始的canvas变量，目的是为了提醒你，我们调用的是哪个对象的clearRect方法。

canvas元素实际上提供了width和height性，所以你可以使用jQuery或纯JavaScript方法来获取Canvas的尺寸。

但是，并不一定要清除整个Canvas，可以只清除Canvas的一个特定区域。例如，如果我们只想清除例子中的正方形，可以按以下方式调用clearRect：

context.clearRect(40, 40, 100, 100);

这样就剩下一个圆形。

这种方法是通过修改clearRect的参数来清除一个特定区域。在我们的例子中，我们将准备擦除的区域的原点（左上角）移动到正方形的左上角(40，40)，并将准备擦除的区域的宽度和高度设置为正方形的宽度和高度(100)。其结果是只将正方形所在的特定区域清除。

按照以下方式修改clearRect的参数，就能够将圆形清除：

context.clearRect(180, 40, 100, 100);

如果计算正确，画布中将只剩下正方形。

记住，弧形的原点是它的中心，所以为了获得clearRect方法所需要的正确原点，我们需要用原点的x和y坐标减去它的半径。 Canvas中的对象是可以被部分擦除的，虽然你可能并不需要这样做：

context.fillRect(40, 40, 100, 100); 
    context.beginPath();
    context.arc(230, 90, 50, 0, Math.PI*2, false); 
    context.closePath(); 
    context.fill(); 
    context.clearRect(230, 90, 50, 50);

这个例子会切掉圆形的一部分（见图1）。

擦除图形的一部分

我们可以先绘制一个基本形状，然后再去掉一部分，从而快速方便地绘制出一些复杂的形状。

重新设置画布宽高

如果只是想要擦除Canvas上的所有内容，并从零开始绘图，那么你可以考虑使用重新设置画布宽高。其依据是每当重新设置一个canvas元素的width和height属性时，Canvas都会自动清除内容并返回其原始状态。这种方法也有一些缺点，会清除之前所有设置的样式而不仅仅是内容，我们先看一个例子：

context.fillStyle = "rgb(255, 0, 0)"; 
    context.fillRect(40, 40, 100, 100); 
    context.beginPath(); 
    context.arc(230, 90, 50, 0, Math.PI*2, false); 
    context.closePath(); 
    context.fill();

上面的代码仅仅是在Canvas上绘制出一个红色正方形和一个圆形。现在让我们来重置这个Canvas：

 canvas.attr("width", canvas.width()); 
    canvas.attr("height", canvas.height());

在这里，我们使用jQuery的方法。需要修改canvas元素的width和height属性，所以可以使用jQuery的attr方法。实际上，我传入了希望修改的属性名称（width和height）。后面紧跟它们相应的值（与之前相同的宽度和高度）。如果一切正确，你会看到一个空白的Canvas。

现在，将下面这行代码添加到重置宽度/高度的后面：

context.fillRect(40, 40, 100, 100);

这应该会绘制出一个红色正方形，对吗？（记住：之前设置了fillStyle属性。）那么，为什么它实际上绘制出了一个黑色正方形呢（图2）？

重新设置画布宽高

重新设置宽度，高度技巧的缺点是，它会完全重置Canvas上的所有内容，包括样式和颜色。所以，只有准备完全重置Canvas，而不仅仅是清除内容时，你才能使用这种方法。

$(function () { var canvas1 = $("#canvas1"); var context1 = canvas1.get(0).getContext("2d"); context1.fillRect(40, 40, 100, 100); context1.beginPath(); context1.arc(230, 90, 50, 0, Math.PI * 2, false); context1.closePath(); context1.fill(); context1.clearRect(230, 90, 50, 50); var canvas2 = $("#canvas2"); var context2 = canvas2.get(0).getContext("2d"); context2.fillStyle = "rgb(255, 0, 0)"; context2.fillRect(40, 40, 100, 100); context2.beginPath(); context2.arc(230, 90, 50, 0, Math.PI * 2, false); context2.closePath(); context2.fill(); canvas2.attr("width", canvas2.width()); canvas2.attr("height", canvas2.height()); context2.fillRect(40, 40, 100, 100); });