canvas制作简单动画

时间:2021-12-12 03:34:31

在画布元素<canvas>中,除了绘制图形、图像、文字外,还可以制作一些简单的动画,制作过程十分简单,主要分为两步操作:

1.自定义一个函数,用于图形的移动或其他动作。

2.使用setInterval方法设置动画执行的间隔时间,反复执行自定义函数。

下面通过实例介绍在<canvas>元素中制作简单动画的过程。

实例在画布中制作简单动画

1.功能描述

在页面中,新建一个<canvas>元素,在该画布元素中,绘制一个卡通头部图形,当页面加载时,该头部图形从画布的左边慢慢移至右边,又从右边移动至左边,最后,停止在开始移动时的位置。

2.实现代码

在Dreamweaver CS5中新建一个HTML页面7-16.html,加入代码如代码清单所示。

代码清单在画布中制作简单动画。

canvas制作简单动画

在实例中,页面导入一个Js文件js16.js,在该文件中,自定义多个函数,用于页面加载过程中,制作简单动画的调用。其实现的代码如代码清单所示:

canvas制作简单动画

3.页面效果

该页面在Chrome 10浏览器中执行的页面效果如图所示:

canvas制作简单动画

4.源码分析

在本实例的Js代码中,定义了四个自定义函数,其中函数pageload()用于页面加载时的调用,drawFace函数用于根据上下文环境对象,在画布中绘制卡通人脸;drawCirc函数用于根据传递的参数值,使用fill()与stroke()方法绘制指定位置、填充色、半径、弧度的圆形;moveFace函数用于实现往返移动圆形脸部的功能。

在drawFace函数中,四次调用drawCirc函数,分别绘制卡通人头部的头形、两只眼睛与笑脸;在moveFace函数中,先根据自增量intI的值,使用translate()方法向右移动卡通人头部,当intI值大于20时,转为获取intJ值,根据自减量intJ的值,使用translate()方法向左移动卡通人头部,直到intJ值小于0,便停止移动;在自定义函数pageload()中,通过setInterval()方法,按时反复执行moveFace函数,最终在画布中制作成简单的动画效果,详细实现过程见代码中加粗部分所示。