下面详细解释都在源码中:<!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,0,0,0,0,arr[i].r);colorObj.addColorStop(0,'#cbc0f3');colorObj.addColorStop(1,'#06198b');context.fillStyle=colorObj;context.arc(0,0,arr[i].r,0,Math.PI*2);context.fill();context.restore();}},50);}</script></body></html>主要要理解焦距的概念,实际开发过程中,可能X轴,Y轴都有小球的运动速度分量,那才能在运动的过程中转弯,撞墙等特效.<img src="" alt="" />
，抱最大的希望，为最大的努力，做最坏的打算
