css3粒子效果
#topcanvas{position:absolute;background:#fff;z-index:-7;width:300px;height:300px;}
function $(id){
return typeof id === "string" ? document.getElementById(id) : id;
}
(function (window, undefined) {
if (window.ZHJ) {
return;
}
// }
var ZHJ = window.ZHJ = {};
//粒子效果
ZHJ.drawPartical = {
drawFunction : function(ctx,r){//构造粒子模板－－公用函数
ctx.save();
ctx.beginPath();
ctx.moveTo(r,0);
for(var i=0;i<10;i++){
ctx.rotate(Math.PI/Math.random()*20);
ctx.lineTo(r,0);
}
ctx.closePath();
ctx.fill();
ctx.restore();
},
drawImplement : function(){//粒子效果－－产生粒子，定制密度，颜色
setInterval(function(){
var topcCanvas = $('topcanvas');
var ctx = topcCanvas.getContext('2d');
ctx.fillStyle = '#fff';//画布颜色
ctx.fillRect(0,0,300,150);//填充区域的大小为200*150
ctx.save();
ctx.beginPath();
for(var j=1;j<100;j++){//生成粒子密度
ctx.save();
ctx.fillStyle = '#ccc';//粒子颜色
ctx.translate(300-Math.floor(Math.random()*300),75-Math.floor(Math.random()*150));
ZHJ.drawPartical.drawFunction(ctx,Math.floor(Math.random()*4));//粒子生成
ctx.restore();
}
ctx.restore();
},100);
}
};
ZHJ.drawPartical.drawImplement();//粒子－－页面执行处
})(window);
