怎么用HTML5Canvasdraw方法制作动画效果-创新互联

这篇文章主要介绍“怎么用HTML5 Canvas draw方法制作动画效果”，在日常操作中，相信很多人在怎么用HTML5 Canvas draw方法制作动画效果问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么用HTML5 Canvas draw方法制作动画效果”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

HTML5 Canvas动画效果演示
主要思想：
首先要准备一张有连续帧的图片，然后利用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帧的大雁飞行图片实现的效果：
 
源图像：
 
程序代码：

代码如下:

HTML Canvas Animations Demo - By Gloomy Fish

Play Animations

发现上传透明PNG格式有点问题，所以我上传不透明的图片。可以用其它图片替换，替换以后请修改较大帧数从22到你的实际帧数即可运行。

到此，关于“怎么用HTML5 Canvas draw方法制作动画效果”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！