HTML5 Canvas draw方法制作动画效果示例
摘要：HTML5Canvas动画效果演示主要思想：首先要准备一张有连续帧的图片，然后利用HTML5Canvas的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帧的大雁飞行图片实现的效果：
源图像：
程序代码：
相关阅读
网友关注
网友最新关注视频
- 冀教版小学数学二年级下册第二单元《有余数除法的简单应用》
- 冀教版小学英语四年级下册Lesson2授课视频
- 30.3 由不共线三点的坐标确定二次函数_第一课时(市一等奖)(冀教版九年级下册)_T144342
- 沪教版牛津小学英语（深圳用） 四年级下册 Unit 12
- 【部编】人教版语文七年级下册《老山界》优质课教学视频+PPT课件+教案，安徽省
- 沪教版八年级下册数学练习册一次函数复习题B组（P11）
- 七年级下册外研版英语M8U2reading
- 第8课 对称剪纸_第一课时(二等奖)(沪书画版二年级上册)_T3784187
- 化学九年级下册全册同步 人教版 第18集 常见的酸和碱（二）
- 19 爱护鸟类_第一课时(二等奖)(桂美版二年级下册)_T502436
精品推荐
网页设计子分类
最新HTML5教程学习