canvas通过动态生成像素点做绚丽效果
浏览量：3226
本例中的粒子就是实实在在的像素，由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
*/
//初始化画布
varcanvas=document.getElementById('Canvas');
varctx=canvas.getContext('2d');
/*
*创建一个圆环类Circle,智能圆环的模型
*/
varCircle=function(x,y,speeds){
this.x=x;
this.y=y;
this.speed=speeds;
}
Circle.prototype={
//draw方法，画出像素
draw:function(){
varn=this.y*imgdata.width+this.x;
vari=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实例，实现画布的渲染
*/
varFrame=function(){
this.circles=[];
this.sint=null;
}
Frame.prototype={
//star开始定时器，循环调用渲染方法
star:function() {
this.lastFrame=(newDate()).getTime();
this.sint=setInterval((function(progra){
returnfunction(){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=(newDate()).getTime();
this.ftp=1000/(this.nowFrame-this.lastFrame);
this.lastFrame=this.nowFrame;
console.log(this.ftp);
//调用每个实例circle的运动方法，监听circle坐标实现碰壁反弹效果
for(i inthis.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
varfra=newFrame();
//创建100个圆环实例circles【i】
for(vari=0; i<20000; i++) {
//输入speed属性
varspeed={
speedX:Math.floor(Math.random()*3),
speedY:Math.floor(Math.random()*10+4)
}
//创建实例
varcircle=newCircle(Math.floor(Math.random()*canvas.width/2),Math.floor(Math.random()*canvas.height/2),speed);
fra.circles[i]=circle;
}
//开始渲染
fra.star();
</script>
</html>