HTML5 Canvas烟花喷泉动画特效
1、新建html文档。
2、书写html。
<canvas id="c
3、书写css样式。
<style>
* { padding: 0; margin: 0; }
html, body { position: relative; width: 100%; height: 100%; }
body { background: #eee; }
canvas { background: black; display: block; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
</style>
4、添加JS。
<script src="js/jquery-1.8.3.min.js"></script>
<script>
;(function(main) {
main();
})(function() {
'use strict';
var c = document.getElementById('c');
var ctx = c.getContext('2d');
var W = c.width = window.innerWidth;
var H = c.height = window.innerHeight;
var CX = W / 2;
var CY = H / 2;
var Particle = function(x, y, vx, vy) {
this.x = x;
this.y = y;
this.ox = x;
this.oy = y;
this.vx = vx;
this.vy = vy;
this.alpha = Math.random();
this.color = 25;
this.lineWidth = Math.random() * 4;
};
Particle.prototype = {
constructor: Particle,
update: function() {
this.vx += Math.random() * 0.5 - 0.25;
this.vy += 0.8;
this.vy *= 0.98;
this.alpha *= 0.95;
this.ox = this.x;
this.oy = this.y;
this.x += this.vx;
this.y += this.vy;
if(this.y < 0 || this.y > H || this.alpha < 0.1) {
this.vx = Math.random() * 2 - 1;
this.vy = Math.random() * -50;
this.ox = this.x = CX;
this.oy = this.y = H;
this.alpha = Math.random();
}
},
render: function(ctx) {
ctx.save();
ctx.globalAlpha = 0.98;
ctx.lineWidth = this.lineWidth;
ctx.strokeStyle = 'hsla(' + (this.color) + ', 100%, 50%, ' + this.alpha + ')';
ctx.beginPath();
ctx.moveTo(this.ox, this.oy);
ctx.lineTo(this.x, this.y);
ctx.stroke();
ctx.restore();
}
};
var particleCount = 500;
var particle = null;
var particles = [];
var interval = 0;
for(var i = 0; i < 250; i++) {
particle = new Particle(
CX,
H,
Math.random() * 2 - 1,
Math.random() * -50
);
particles.push(particle);
}
requestAnimationFrame(function loop() {
requestAnimationFrame(loop);
ctx.globalCompositeOperation = 'source-over';
ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
ctx.fillRect(0, 0, W, H);
ctx.globalCompositeOperation = 'lighter';
if(particles.length < particleCount) {
particle = new Particle(
CX,
H,
Math.random() * 2 - 1,
Math.random() * -50
);
particles.push(particle);
}
for(var i = 0, len = particles.length; i < len; i++) {
particle = particles[i];
particle.update();
particle.render(ctx);
}
});
});
</script>
这里的JS引用的jquery-1.8.3.min.js这个资源站可以下载。
5、查看效果。
