html5 canvas粒子背景,利用HTML5实现Canvas模糊粒子背景特效

特效描述：利用HTML5实现 Canvas 模糊粒子 背景特效。利用HTML5实现Canvas模糊粒子背景特效

代码结构

1. HTML代码

window.requestAnimFrame = (function(){

return window.requestAnimationFrame ||

window.webkitRequestAnimationFrame ||

window.mozRequestAnimationFrame ||

window.oRequestAnimationFrame ||

window.msRequestAnimationFrame ||

function( callback ){

window.setTimeout(callback, 1000 / 60);

};

})();

var canvas = document.getElementsByTagName("canvas")[0];

var ctx = canvas.getContext("2d");

var w = window.innerWidth, h = window.outerHeight;

canvas.width = w;

canvas.height = h;

var bg_particle_no = 180;

var particles = [];

function init(){

reset_scene();

for(var i=0;i

var p = new bg_particle();

particles.push(p);

}

}

function reset_scene(){

ctx.fillStyle = "#03244B";

ctx.fillRect(0,0,w,h);

}

function drawscene(){

reset_scene();

for(var i=0;i

var p = particles[i];

p.x += p.sx;

if(p.x > w || p.x < 0){

p.sx = -p.sx;

}

p.y += p.sy;

if(p.y > h || p.y < 0){

p.sy = -p.sy;

}

p.draw();

}

}

function bg_particle(){

this.x = Math.random()*w;

this.y = Math.random()*h;

this.sx = Math.random()*2;

this.sy = Math.random()*2;

var min = 10;

var max = 40;

this.r = Math.random()*(max - min);

this.draw = function(){

ctx.fillStyle="#52CA70";

ctx.beginPath();

ctx.arc(this.x,this.y,this.r, 0, Math.PI*2, false);

ctx.fill();

}

}

function animloop() {

drawscene();

requestAnimFrame(animloop);

}

init();

animloop();