HTML烟花代码是一段用于制作烟花效果的HTML代码。它通过使用CSS和JavaScript来创建动态的烟花效果,可以在网页上显示出来。
HTML烟花代码是一段用于制作烟花效果的HTML代码。它通过使用CSS和JavaScript来创建动态的烟花效果,可以在网页上显示出来。
以下是一段HTML烟花代码:
body {
background-color: #000;
}
// The canvas
var canvas = document.getElementById('fireworks');
var ctx = canvas.getContext('2d');
// Constants
var GRITY = 0.3;
var FRICTION = 0.99;
var PARTICLE_NUM = 50;
var PARTICLE_RADIUS = 3;
var FIREWORK_NUM = 5;
// Colors
var colors = [
'#f44336',
'#e91e63',
'#9c27b0',
'#673ab7',
'#3f51b5',
'#2196f3',
'#03a9f4',
'#00bcd4',
'#009688',
'#4caf50',
'#8bc34a',
'#cddc39',
'#ffeb3b',
'#ffc107',
'#ff9800',
'#ff5722'
];
// Particles
var particles = [];
// Fireworks
var fireworks = [];
// Initialize
function init() {
// Create particles
for (var i = 0; i < PARTICLE_NUM; i++) {
particles.push(new Particle());
}
// Create fireworks
for (var i = 0; i < FIREWORK_NUM; i++) {
fireworks.push(new Firework());
}
}
// Update
function update() {
// Update particles
for (var i = 0; i < particles.length; i++) {
particles[i].update();
}
// Update fireworks
for (var i = 0; i < fireworks.length; i++) {
fireworks[i].update();
}
}
// Draw
function draw() {
// Clear the canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw particles
for (var i = 0; i < particles.length; i++) {
particles[i].draw();
}
// Draw fireworks
for (var i = 0; i < fireworks.length; i++) {
fireworks[i].draw();
}
}
// Animation loop
function loop() {
update();
draw();
requestAnimationFrame(loop);
}
// Particle
function Particle() {
this.x = Math.random() * canvas.width;
this.y = Math.random() * canvas.height;
this.vx = Math.random() * 5 - 2.5;
this.vy = Math.random() * 5 - 2.5;
this.radius = PARTICLE_RADIUS;
this.color = colors[Math.floor(Math.random() * colors.length)];
this.update = function() {
this.x += this.vx;
this.y += this.vy;
this.vy += GRITY;
this.vx *= FRICTION;
this.vy *= FRICTION;
if (this.y > canvas.height) {
this.y = 0;
}
};
本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处
评论列表(51条)