12.6 HTML 画板擦除

擦除是画板的基本功能,用来更新渲染

在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,而不仅仅是清除内容时,你才能使用这种方法。