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,而不仅仅是清除内容时,你才能使用这种方法。
文件下载(已下载 3144 次)发布时间:2013/1/22 下午10:34:49 阅读次数:13212