save()与restore()
宁波网站建设的CanvasContext2D之旅已接近尾声，只剰下两个需要介绍的方法了：
context.save0及contextrestore()没有这两个方法，我们将难以处理任何复杂的canvas图形，这一点只需要略看一下前面示例图的源代码就不难发现。为了更好地了解方法context.save()及context.restore0，我们先进行一个概述。
通过用canvas.getContext(’2d’)定义绘制环境，所有属性都被设为默认值，并在绘制过程中直接生效：
context.globalAlpha=；
context.globalCompositeOperation='source-over';context.strokeStyle='black';context.fillStyle='black*;
context.lineWidth=l;
context.lineCap='butt';
context.lineDoin='miter';
context.miterLimit=10;
context.shadowOffsetX=0;
context.shadowOffsetY=0；
context.shadowBlur=0;
context.shadowColor='rgba(0,0,0,0)'；context.font='lOpxsans-serif';context.textAlign='start':
context.textBaseline='alphabetic';
同时，坐标系被初始化为单位矩阵，并创建一个包含整个画布的剪切遮罩：
contextsetTransform(l,,);context.beginPath();context.rect(0,0〉canvas.width,canvas.height);context.clipQ;如果画布的属性、变换或剪切遮罩发生改变，它们会在再次改变之前一直保持有效。在一些复杂的绘制过程中，我们常需要暂时丢弃这些改变，这时候contextsaveO和context.restore()就会很有用了。
通过Context.save0,我们可以随时创建一个快照，保存当前设置的属性、变换以及剪切遮罩。其后我们可以通过contextiestoreO来访问这个快照。鉴于快照也可以嵌套，规范将其描述为“绘制状态堆找(stackofdrawingstates)”。
在用到变换或剪切遮罩的时候，这个技术非常有用。在制作阴影效果时，用context.save()及context.restore()将阴影效果的四个部分重置为默认值，比逐部分修改要简单得多。在我们即将谈到的动画中，context.save()及context.restore()是不可或缺的。
动画
与SVG或SMIL动画不同，Canvas动画片需要纯手工制作，基本原理是通过一个计时器，定期调用函数进行绘制。计时器和定期调用可以通过win[a-z]o[a-z].SetInterval()实现，其余部分则需要靠Canvas编写者的想像力了。
彩色球体动画
这是我们动画的初次亮相：不同颜色的球体在画布不同位置随机出现，缓慢淡出，并最终被其他球体覆盖。动画速度为一个成人休眠时的脉搏，约每分钟60拍。另外我们希望为其添加一个额外功能，在每次单击画布时停止或重新开始动画。
约50行JavaScript代码就足够了。但在分析代码清单之前，先让我们看看动画的一幅静态屏幕截图。
本文由乐华网络编辑，转载请注明出处
宁波网站建设www.leseo.net
