canvas制作简单动画

在画布元素<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函数，最终在画布中制作成简单的动画效果，详细实现过程见代码中加粗部分所示。