H5 canvas 制作漂浮气泡的效果

HTML5圆形气泡背景动画特效是一款基于HTML5 Canvas实现的气泡背景动画，之前多次有好友问道，所以这里就直接分享一下。不多说废话，直接上代码：

HTML代码：

<div id="large-header" class="large-header">
    <canvas id="ani-canvas"></canvas>
</div>

JS代码：

(function() {

var width, height, largeHeader, canvas, ctx, circles, target, animateHeader = true;

// Main
initHeader();
addListeners();

function initHeader() {
width = window.innerWidth;
height = window.innerHeight;
target = {x: 0, y: height};

largeHeader = document.getElementById('large-header');
largeHeader.style.height = height+'px';

canvas = document.getElementById('ani-canvas');
canvas.width = width;
canvas.height = height;
ctx = canvas.getContext('2d');

// create particles
circles = [];
for(var x = 0; x < width*0.5; x++) {
var c = new Circle();
circles.push(c);
}
animate();
}

// Event handling
function addListeners() {
window.addEventListener('scroll', scrollCheck);
window.addEventListener('resize', resize);
}

function scrollCheck() {
if(document.body.scrollTop > height) animateHeader = false;
else animateHeader = true;
}

function resize() {
width = window.innerWidth;
height = window.innerHeight;
largeHeader.style.height = height+'px';
canvas.width = width;
canvas.height = height;
}

function animate() {
if(animateHeader) {
ctx.clearRect(0,0,width,height);
for(var i in circles) {
circles[i].draw();
}
}
requestAnimationFrame(animate);
}

// Canvas manipulation
function Circle() {
var _this = this;

// constructor
(function() {
_this.pos = {};
init();
console.log(_this);
})();

function init() {
_this.pos.x = Math.random()*width;
_this.pos.y = height+Math.random()*100;
_this.alpha = 0.1+Math.random()*0.3;
_this.scale = 0.1+Math.random()*0.3;
_this.velocity = Math.random();
}

this.draw = function() {
if(_this.alpha <= 0) {
init();
}
_this.pos.y -= _this.velocity;
_this.alpha -= 0.0005;
ctx.beginPath();
ctx.arc(_this.pos.x, _this.pos.y, _this.scale*10, 0, 2 * Math.PI, false);
ctx.fillStyle = 'rgba(255,255,255,'+ _this.alpha+')';
ctx.fill();
};
}

})();

演示及下载地址：

[demo]http://demo.skillcat.cn/html-html5/H5-animated-bubble/index.html[/demo]　　[download]http://demo.skillcat.cn/html-html5/H5-animated-bubble/H5-animated-bubble.zip[/download]