HTML5 Canvas动画效果实现原理
2016-07-05 18:02
916 查看
在线演示
使用HTML5画布能够帮助我们快速实现简单的动画效果,基本原理如下:
每隔一定时间绘制图形并且清除图形,用来模拟出一个动画过程,可以使用context.clearRect(0, 0, x, y)方法来刷新需要绘制的图形
首先是绘制图形的方法,如下:
function myAnimation() { ctx.clearRect(0, 0, canvas_size_x, canvas_size_y); if (x_icon < 0 || x_icon > canvas_size_x - size_x) { stepX = -stepX; } if (y_icon < 0 || y_icon > canvas_size_y - size_y) { stepY = -stepY; } x_icon += stepX; y_icon += stepY; ctx.drawImage(anim_img, x_icon, y_icon); }
以上方法每隔一定时间清除画布内容,并且重新计算绘制图形位置,一旦超过了画布大小,则反转坐标绘制图形。
下面是实际绘制图形方法:
function draw() { var canvas = document.getElementById("canvas"); ctx = canvas.getContext("2d"); anim_img = new Image(size_x, size_y); anim_img.onload = function() { setInterval('myAnimation()', 5); } anim_img.src = 'http://www.gbtags.com/gb/networks/avatars/80x8013d6393f-a44c-4180-8cb6-7bf0e4776283.png'; }
以上方法将图形定义,并且调用实际绘制动画的方法,搞定!
如果大家对于HTML5绘制动画有兴趣,或者希望了解如何模拟物理动画效果,请阅读下面的互动教程,相信能够帮助你更好理解HTML画布:
相关文章推荐
- 将HTML5 Canvas的内容保存为图片
- HTML5之拖放
- HTML5画布(CANVAS)速查简表
- html5中新增的主题元素标签
- 【HTML5开发系列】meta元素详解
- HTML5实例教程:OL标签的start属性和reversed属性
- HTML5实体刮刮乐效果!
- HTML5 progress和meter控件
- HTML5 progress元素的样式控制、兼容与实例
- HTML5基础-Mark标签高亮显示文本
- HTML5 <details> 标签
- HTML5中figure标签使用实例
- HTML5全屏(Fullscreen)API详细介绍
- 【HTML5开发系列】HTML元素总结
- swiper的基础使用(二十)
- HTML5绘图之Canvas标签 绘制坐标轴
- 聊一聊HTML5存储的那些事儿!
- HTML5中aside标签的两种使用方法
- HTML5 canvas画布 学习实例
- HTML5之article元素与section元素之间的区别?