canvas通過動態生成像素點做絢麗效果
瀏覽量：3329
本例中的粒子就是實實在在的像素，由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>