5.6--HTML5的图像及动画制作动画.ppt

第5章HTML5的图像及动画5.1canvas元素5.3图形操作5.2使用路径画图5.4图像操作5.5canvas其他操作5.6制作动画5.7上机实践——绘制时钟5.6制作动画在HTML5中通过绘制图形、清除图形、再绘制图形、再清除图形的方式，可以实现简单的动画效果。具体实现步骤分为两步。（1）编写绘图方法，用于实现绘制或清除图形。（2）编写JavaScript方法并调用setInterval方法设置绘图动作执行间隔，以实现自动绘图、清除操作，形成动画效果。其中setInterval方法有两个参数，第一个参数用于设置要执行的绘图方法，第二个参数用于设置时间间隔，单位为毫秒。下面通过一个例子介绍HTML5中动画的实现方式及效果，示例代码如下。!DOCTYPEhtmlhtmlmetacharset=gb2312/scriptvarx=0,y=0;//绘制矩形，其中矩形的起始点坐标为动态增加functionmove(){ varcanvas=document.getElementById(myCanvas); varcontext=canvas.getContext(2d); context.clearRect(0,0,400,200); if(x400) { x++; } if(y200) { y++; } context.fillRect(x,y,50,50);}functiondraw(){ varcanvas=document.getElementById(myCanvas); varcontext=canvas.getContext(2d); context.fillStyle=red; context.fillRect(0,0,50,50); setInterval(move,200);//每200毫秒调用move方法一次}/scriptfieldsetlegend简单动画效果/legendcanvasid=myCanvaswidth=400pxheight=200px/canvasbrbuttononclick=draw()绘图/button/fieldset/html保存此段代码并在浏览器中运行，当单击“绘图”按钮时，一个红色的方块将不断移动，形成动画，效果如图5-25和图5-26所示。图5-25动画开始时方块位置图5-26动画执行一段时间后方块位置