HTML5 Canvas动画效果实现原理
使用HTML5画布能够帮助我们快速实现简单的动画效果,基本原理如下:
每隔一定时间绘制图形并且清除图形,用来模拟出一个动画过程,可以使用context.clearRect(0,x,y)方法来刷新需要绘制的图形
在线演示
首先是绘制图形的
方法,如下:
- function myAnimation() {
- ctx.clearRect(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画布实现的粒子运动效果
相关文章
HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5移动端获奖无缝滚动动画实现