5．擦除Canvas

在Canvas上绘制确实是很有趣的事情，但当你画错了或者想要清除画布和绘制其他图形时，应该如何做呢？有两个方法可以使用：clearRect方法以及宽度/高度技巧。我们首先学习2D渲染上下文的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尺寸，也可以使用iQuery的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方法，还是使用纯JavaSmpt方法来访问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重置为默认新状态的方法，但是关于它的文档很少。其依据是每当重新设置一个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。

现在，将下面这行代码添加到使用宽度/高度技巧清除Canvas内容的代码之后：

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

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

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

发布时间：2013/1/22 22:34:49  阅读次数：12490