HTML5Canvas动画效果演示

HTML5 Canvas动画效果演示

创新互联是一家专业提供鼓楼企业网站建设,专注与成都网站建设、网站设计、成都h5网站建设、小程序制作等业务。10年已为鼓楼众多企业、政府机构等服务。创新互联专业网站制作公司优惠进行中。

主要思想：

首先要准备一张有连续帧的图片，然后利用HTML5 Canvas的draw方法在不同的时间

间隔绘制不同的帧，这样看起来就像动画在播放。

关键技术点：

JavaScript 函数setTimeout()有两个参数，第一个是参数可以传递一个JavaScript方法，

另外一个参数代表间隔时间，单位为毫秒数。代码示例：

setTimeout( update, 1000/30);

Canvas的API-drawImage()方法，需要指定全部9个参数：

ctx.drawImage(myImage, offw, offh, width,height, x2, y2, width, height);

其中offw, offh是指源图像的起始坐标点，width, height表示源图像的宽与高，x2,y2表

示源图像在目标Canvas上的起始坐标点。

一个22帧的大雁飞行图片实现的效果：

HTML5 Canvas动画效果演示

程序代码：

     Canvas Mouse Event Demo  	   	HTML Canvas Animations Demo - By Gloomy Fish
 	Play Animations

发现上传透明PNG格式有点问题，所以我上传

不透明的图片。可以用其它图片替换，替换以后

请修改最大帧数从22到你的实际帧数即可运行。

当前文章：HTML5Canvas动画效果演示
路径分享：http://cdxtjz.cn/article/pjjioh.html

HTML Canvas Animations Demo - By Gloomy Fish