css+canvas+html,css加载+canvas动画

$(function() {

var c = $('canvas').get(0);

var ctx = c.getContext('2d');

var W = 300;

var H = 150;

$('canvas').css('width', W);

$('canvas').css('height', H);

var Bubble = function() {

this.x = 100;

this.y = 130;

this.r = Math.random() * 5 + 5;

this.a = 0.8;

this.life = true;

this.speedx = Math.random() * 0.2 - 0, 1;

this.speedy = -Math.random() * 2;

this.speedr = Math.random() * 2 - 1;

this.speeda = 1;

}

Bubble.prototype = {

constructor: Bubble,

update: function() {

this.x += this.speedx;

this.y += this.speedy;

this.a += this.speeda;

if (this.y < 0 || this.a < 0.5) {

this.life = false;

}

},

render: function() {

ctx.beginPath();

ctx.fillStyle = 'hsla(220,100%,50%,' + this.a + ')';

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

ctx.fill();

}

}

var bs = [];

for (var i = 0; i < 5; i++) {

var b = new Bubble();

bs.push(b);

}

requestAnimationFrame(function loop() {

requestAnimationFrame(loop);

ctx.globalCompositeOperation = 'source-over';

ctx.fillStyle = '#006666';

ctx.fillRect(0, 0, W, H);

ctx.globalCompositeOperation = 'lighter';

for (var i = 0; i < bs.length; i++) {

console.log(bs[i]);

bs[i].update();

if (!(bs[i].life)) {

bs[i] = bs[bs.length - 1];

var b = new Bubble();

bs[bs.length - 1] = b;

}

bs[i].render();

}

})

})