粒子文字特效css,CSS3 粒子效果

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);