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)。

图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)?

图2 使用宽度/高度技巧重置Canvas

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

文件下载(已下载 3144 次)

发布时间:2013/1/22 下午10:34:49  阅读次数:13212

2006 - 2024,推荐分辨率 1024*768 以上,推荐浏览器 Chrome、Edge 等现代浏览器,截止 2021 年 12 月 5 日的访问次数:1872 万 9823 站长邮箱

沪 ICP 备 18037240 号-1

沪公网安备 31011002002865 号