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帧的大雁飞行图片实现的效果:
源图像:
程序代码:
复制代码
相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
- ■盗版也能免费升级到win10?盗版win7win8升级Windows10教程
- ■Android通过Handler与AsyncTask两种方式动态更新ListView(附源码)
- ■Photoshop为偏灰的靠墙壁美女图片调制出流行的淡黄色
- ■Android编程实现在Bitmap上涂鸦效果
- ■Android编程实现基于BitMap获得图片像素数据的方法
- ■Android编程实现TextView字体颜色设置的方法小结
- ■Windows xp系统开机后提示找不到comctl32.dll文件的解决办法
- ■Android编程实现屏幕自适应方向尺寸与分辨率的方法
- ■Win10怎么禁止用户安装软件 禁止用户安装软件方法详解
- ■基于startActivityForResult方法处理两个Activity之间数据传递问题
- ■Android编程之绘制文本(FontMetrics)实现方法
- ■win10 10041更新提示错误怎么办?win10预览版10041问题解决方法
- ■Android编程实现获得内存剩余大小与总大小的方法
- ■Win10预览版10041怎么样?Win10预览版10041安装体验评测
- ■Android编程实现读取本地SD卡图片的方法
- ■photoshop为偏灰的人物图片调出高雅温馨色彩
- ■android底部弹出iOS7风格对话选项框(QQ对话框)--第三方开源之IOS_Dialog_Library
- ■Win10怎么更改默认存储位置?win10更改文档默认保存位置的教程
- ■Android编程实现设置按钮背景透明与半透明及图片背景透明的方法
- ■解决Android模拟器端口被占用问题的办法
最新HTML5教程学习
网页设计子分类