大佬教程收集整理的这篇文章主要介绍了如何用Html5中的canvas模拟小球三维运动动画呢?，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
<!doctype html> <html> <head> <Meta charset="utf-8"> <title>无标题文档</title> <style> #canvas{ BACkground:#eee; } </style> </head> <body> <canvas id='canvas' width="500" height='500'></canvas> <script> window.onload=function(){ var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); //平移,主要是将坐标轴平移到中间,为了画圆定位方便 context.translate(250,250); //定义焦距 var fos = 300; //存放小球的数组 var arr = []; for(var i = 0 ; i < 8 ; i++){ var arcObj = { //半径,用随机数目的是让每个小球大小不一 r:10+5*Math.random(),//起始X坐标 x:-200+i*30,//起始Y坐标 y:-100+200*Math.random(),//起始Z坐标,这里需要理解,我们要构造的是一个三维立体小球的运动 //则X,Y轴不能表达空间感,你需要充分的想象Z坐标轴是顺着你的眼睛的就是Z轴 z:i*10,//小球的运行速度 speed:20 } arr.push(arcObj); } seTinterval(function(){ //清除画布,每次画之前先将上次的清除掉.然后绘出本次的,就可以形成动画效果. context.clearRect(-250,-250,500,500); //将arr排序,sort()的参数则是作为一种比较规则 var newArr = arr.sort(function (a,b){ return a.z > b.z }); //循环绘出刚才定义的几个小球 for(var i = 0 ; i < newArr.length ; i++){ //z轴的变化,每次变化都是 速度*时间+z = z;由于speed未定义单位,则时间可忽略 arr[i].z += arr[i].speed; //让小球来回弹跳 if(arr[i].z > 600 || arr[i].z < -50){ arr[i].speed *= -1; } //这里的缩放比例,一定要注意,你要想象你眼前有个球垂直从远处飞来,逐渐变大的过程,Z轴不断增加.焦距就想象成从最初你到球的距离,通过运动后,现在到球的距离和焦距就可以形成缩放比例. var scales = fos/(fos+arr[i].z); var x1 = arr[i].x*scales; var y1 = arr[i].y*scales; //保存之前的context绘图环境,即后续可以用context.restore方法可以恢复,//目的是让下面的context变化不影响其他的画图样式. context.save(); //平移X,Y 也可以不用平移X,Y只要在下面的画圆中定义相应的X,Y也能达到相同的目的 context.translate(x1,y1); //将坐标轴缩放,目的是让小球的大小发生视觉上的变化. context.scale(scales,scales); context.beginPath(); //定义放射性颜色渐变 var colorObj = context.createRadialGradient(0,arr[i].r); colorObj.addColorStop(0,'#cbc0f3'); colorObj.addColorStop(1,'#06198b'); context.fillStyle=colorObj; context.arc(0,arr[i].r,Math.PI*2); context.fill(); context.restore(); } },50); } </script> </body> </html>
主要要理解焦距的概念,实际开发过程中,可能X轴,Y轴都有小球的运动速度分量,那才能在运动的过程中转弯,撞墙等特效.
<img src="http://img.blog.csdn.net/20150319221212054" alt="" />
以上是大佬教程为你收集整理的如何用Html5中的canvas模拟小球三维运动动画呢?全部内容，希望文章能够帮你解决如何用Html5中的canvas模拟小球三维运动动画呢?所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。