使用canvas 需要注意的几点

clearRect(x1,x2,width,height)

原本认为canvas一个令人不愉快的地方是,它不能部分擦除,把不变的东西保留下来,把变化了的擦除进行修改。clearRect()带来了福音。它可以清除指定矩形内的像素,不管是stroke出来的线条还是填充的形状。

这是没有经过clearRect之前的效果,它由一个矩形、两个半圆和一些锯齿形线条组成。在形状的组合上还有一些情况,就是它们的边界很明显,所以拼接时在拼接处加了一个像素的重叠。

这是使用了clearRect之后的效果。整个图经过了45度的旋转,所以画起来比较方便,半圆的角度也都是π/2的整数倍。还有比较多的是给canvas重设宽高值,这样它就会自动除去整个canvas上的像素,整体擦除。

closePath()

closePath()的作用在于它可以把形状的起点和末点仪直线的形式连起来。如果之前没有定义beginPath(),则以最开始画的点为起点。否则就以最近的beginPath()为起点。beginPath()会是下个形状和上一个形状脱离,重新选择绘图起点。最好是成对出现,这样就可以避免形状之间的牵连(上个形状的末点会合下个形状的起点连在一起)。

下半部分的图没有使用任何beginPath()和closePath(),所以首末点和中间形状间的首末点都连在了一起。

save()和restore()

save()restore()是比较使用的工具,它们分别用于保存当前绘图状态,获取上一次存储的绘图状态。绘图状态是指当前绘图说用的样式(style)和变形(transform),包括strokeStylefillStyle,globalAlphalineWidth,lineCaplineJoinmiterLimit,shadowOffsetXshadowOffsetY,shadowBlurshadowColorglobalCompositeOperation等属性以及一transform和clipping path。绘图状态被存在一个栈(stack)内,每一次调用save()都会把当前的绘图状态压到栈内。每一次调用restore()都会把靠近的存储状态调出来,回到那个绘图状态。这样就可以很方便的在不同的状态之间转换,而不用重新设置。

下面是一个例子:

 

(function(){
    var canv = document.getElementById('canvas')
    ,   contxt = canv.getContext('2d');
    contxt.fillStyle = '#379aff';
    contxt.arc(200,200,100, 0, 2*Math.PI);
    contxt.fill();
    contxt.save();
    contxt.fillStyle = 'white';
    contxt.beginPath();
    contxt.arc(200,200,80, 0, 2*Math.PI);
    contxt.closePath();
    contxt.fill();
    contxt.save();
    contxt.beginPath();
    contxt.fillStyle = 'black';
    contxt.arc(200,200,60, 0, 2*Math.PI);
    contxt.fill();
    contxt.restore();//白色
    contxt.beginPath();
    contxt.arc(200,200,40, 0, 2*Math.PI);
    contxt.fill();
    contxt.restore();//蓝色
    contxt.beginPath();
    contxt.arc(200,200,20, 0, 2*Math.PI);
    contxt.fill();
})();
comments powered by Disqus