本例中的粒子就是实实在在的像素，由js代码在canvas上动态生成的像素点！这些像素点通过一个运动方法有规律地动了起来。透过这个思路，我们可以想到很多很炫的效果，但是这个性能有待考察。实验证明，动态控制太多像素点的话绝对会卡的！在做效果方面有经验的朋友，请提出宝贵意见！这个思路走得通么？
<!doctype html> <html> <head> <title>智能粒子</title> <meta charset='utf-8' /> <style type="text/css"> body{background-color:black;} #Canvas{margin:50px auto;display:block;border:1px red solid;} </style> </head> <body> <canvas width='300' height='300' id='Canvas'>您的浏览器不支持canvas</canvas> </body> <script type="text/javascript"> /* *用面向对象编程方法实现的粒子 *by @谢帅shawn */ //初始化画布 var canvas=document.getElementById('Canvas'); var ctx=canvas.getContext('2d'); /* *创建一个圆环类Circle,智能圆环的模型 */ var Circle=function(x,y,speeds){ this.x=x; this.y=y; this.speed=speeds; } Circle.prototype={ //draw方法，画出像素 draw:function(){ var n=this.y*imgdata.width+this.x; var i=n*4; data[i]+=207; data[i+1]+=14; data[i+2]+=139; data[i+3]+=150; }, //move方法，圆环坐标自加速度，并执行draw方法 move:function(){ this.x+=this.speed.speedX; this.y+=this.speed.speedY; this.draw(); } } /* *创建一个Frame帧类,管理所有circles实例，实现画布的渲染 */ var Frame=function(){ this.circles=[]; this.sint=null; } Frame.prototype={ //star开始定时器，循环调用渲染方法 star:function () { this.lastFrame=(new Date()).getTime(); this.sint=setInterval((function(progra){ return function(){progra.render();} })(this),30); }, //render渲染方法 render:function () { //清除上一帧 ctx.clearRect(0,0,canvas.width,canvas.height); imgdata=ctx.getImageData(0,0,canvas.width,canvas.height); data=imgdata.data; //实时输出帧率 this.nowFrame=(new Date()).getTime(); this.ftp=1000/(this.nowFrame-this.lastFrame); this.lastFrame=this.nowFrame; console.log(this.ftp); //调用每个实例circle的运动方法，监听circle坐标实现碰壁反弹效果 for (i in this.circles) { this.circles[i].move(); if(this.circles[i].x>canvas.width || this.circles[i].x<0){ this.circles[i].speed.speedX=-this.circles[i].speed.speedX; //delete this.circles[i];可以实现碰壁消失的效果，delete可删除实例 } if(this.circles[i].y>canvas.height|| this.circles[i].y<0) this.circles[i].speed.speedY=-this.circles[i].speed.speedY; } ctx.putImageData(imgdata,0,0); } } /* *Main */ //创建一个帧实例fra var fra=new Frame(); //创建100个圆环实例circles【i】 for (var i=0; i<20000; i++) { //输入speed属性 var speed={ speedX:Math.floor(Math.random()*3), speedY:Math.floor(Math.random()*10+4) } //创建实例 var circle=new Circle(Math.floor(Math.random()*canvas.width/2),Math.floor(Math.random()*canvas.height/2),speed); fra.circles[i]=circle; } //开始渲染 fra.star(); </script> </html>