canvas小球动画原理

随着html5发展，canvas标签作为h5革命性的发展标志也越来越流行。canvas标签的强大之处，不仅在于它可以作为一个独立的画布，也可以利用canvas做一些动画而不用导入flash文件。同时，canvas还可以一些游戏、商城商品图片放大器功能等等。 这篇博客先写一些简单动画，同时描述一下原理。 首先，canvas标签不是一个独立的部分，它是要以js代码辅助而成的一个模块，所以js代码对其尤为重要。 body中写入canvas标签： 1
//控制小球的运动与暂停 　　 直接上js代码： canvas的js开头都是固定的： 1 2 var canvas = document.getElementById('canvas'), cx= canvas.getContext('2d'),
paused = true ,//设置小球加载完成是否暂停，现在加载完成小球不动。 加载三个小球的数据： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 discs = [ { x:150, y:250, velocityx:-3.2, //小球横向运动速度 velocityy:3.5, //小球纵向运动速度 radius:25,　　　　　　　　//小球半径 strokestyle:'gray', //小球填充颜色 }, { x:50, y:150, velocityx:2.2, velocityy:2.5, radius:25, strokestyle:'blue', }, { x:150, y:75, velocityx:1.2, velocityy:1.5, radius:25, strokestyle:'orange', }, ], 　　 定义小球的数量以及找到控制小球暂停的button 1 2 3 numdiscs = discs.length, //小球数量 animatebutton = document.getElementById('animatebutton'); // 小球暂停开始按钮 　 用canvas画出小球： 1 2 3 4 5 6 7 8 9 10 11 12 13 function draw(){ var disc = discs[i]; //小球的索引 for(var i=0;i cx.canvas.width || disc.x + disc.velocityx -disc.radius<0) //小球横向撞墙后朝相反方向运动 disc.velocityx = -disc.velocityx; if(disc.y +disc.velocityy+disc.radius > cx.canvas.height || disc.y + disc.velocityy -disc.radius<0) //小球纵向向撞墙后朝相反方向运动 disc.velocityy = -disc.velocityy; disc.x+=disc.velocityx; //每次循环小球横向运动距离 disc.y+=disc.velocityy;　　//每次循环小球纵向运动距离 1 } } 　 设置小球的运动，这是一个循环函数

网友评论

更多精彩分享

学习是年轻人改变自己的最好方式