HTML5 Canvas draw方法制作动画效果示例
发布时间:2015-05-12 来源:查字典编辑
摘要: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帧的大雁飞行图片实现的效果:
源图像:
程序代码:
复制代码
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
- Centos5 执行host提示command not found解决方法
- 在CentOS 6.3中安装与配置Tomcat-7方法
- centOS5.5下配置vnc的步骤分享(开启linux远程桌面)
- CentOS 6 的安全配置(CentOS Linux服务器安全设置)
- 在CentOS 6.3中安装与配置Mysql-5.5.29的方法
- Hyper-V装CentOS需要的Linux Integration Components的步骤分享
- DELL服务器M100E中linux5.5无法启动的解决方法
- 在CentOS 6.3中安装与配置JDK-7
- 在CentOS 6.3中安装与配置SVN的方法
- centos中wget的使用方法
最新HTML5教程学习