在画布元素<canvas>中,除了绘制图形、图像、文字外,还可以制作一些简单的动画,制作过程十分简单,主要分为两步操作:
1.自定义一个函数,用于图形的移动或其他动作。
2.使用setInterval方法设置动画执行的间隔时间,反复执行自定义函数。
下面通过实例介绍在<canvas>元素中制作简单动画的过程。
实例在画布中制作简单动画
1.功能描述
在页面中,新建一个<canvas>元素,在该画布元素中,绘制一个卡通头部图形,当页面加载时,该头部图形从画布的左边慢慢移至右边,又从右边移动至左边,最后,停止在开始移动时的位置。
2.实现代码
在Dreamweaver CS5中新建一个HTML页面7-16.html,加入代码如代码清单所示。
代码清单在画布中制作简单动画。
在实例中,页面导入一个Js文件js16.js,在该文件中,自定义多个函数,用于页面加载过程中,制作简单动画的调用。其实现的代码如代码清单所示:
3.页面效果
该页面在Chrome 10浏览器中执行的页面效果如图所示:
4.源码分析
在本实例的Js代码中,定义了四个自定义函数,其中函数pageload()用于页面加载时的调用,drawFace函数用于根据上下文环境对象,在画布中绘制卡通人脸;drawCirc函数用于根据传递的参数值,使用fill()与stroke()方法绘制指定位置、填充色、半径、弧度的圆形;moveFace函数用于实现往返移动圆形脸部的功能。
在drawFace函数中,四次调用drawCirc函数,分别绘制卡通人头部的头形、两只眼睛与笑脸;在moveFace函数中,先根据自增量intI的值,使用translate()方法向右移动卡通人头部,当intI值大于20时,转为获取intJ值,根据自减量intJ的值,使用translate()方法向左移动卡通人头部,直到intJ值小于0,便停止移动;在自定义函数pageload()中,通过setInterval()方法,按时反复执行moveFace函数,最终在画布中制作成简单的动画效果,详细实现过程见代码中加粗部分所示。