2022跨年烟花代码（八）HTML5烟花喷泉
HTML5烟花喷泉
html代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Canvas烟花喷泉动画特效</title>
<script src="js/jquery-1.8.3.min.js"></script>
<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>
</head>
<body>
<canvas id="c"></canvas>
<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>
</body>
</html>
jquery-1.8.3.min.js代码
自行百度下载
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
THE END
二维码