2024新年快乐烟花代码-编程知识

2024新年快乐烟花代码

一、前言

很快就是2024年了，让我们好好告别2023，迎接2024。

凡是过往皆是序章，所有未来皆为可盼。在2023年里也许你踏足山藏，拥有花的铺簧书的风光，也许你进入低谷，经历了一个人的兵荒马乱。但没关系，都翻篇了。

笔者很喜欢的一句话：“既然上了生活的贼船，那就做一个快乐的海盗。”

留下一句，2024，愿新年胜旧年。辞著尔尔，烟火年年，朝朝暮暮，岁岁平安!

二、2024年新年烟花

1、HTML

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title> happy new year fireworks</title></head>
<body>
<!-- partial:index.partial.html --><!-- partial --><script src="assets/js/script.js"></script></body>
</html>

2、部分JavaScript

let chars, particles, canvas, ctx, w, h, current;
let duration = 5000;
let str = ['Happy', 'New', 'Year' , '2024'];init();
resize();
requestAnimationFrame(render);
addEventListener('resize', resize);function firework(t, i, pts) {t -= i*200;let id = i + chars.length*parseInt(t - t%duration);t = t % duration / duration;let dx = (i+1)*w/(1+chars.length);dx += Math.min(0.33, t)*100*Math.sin(id);let dy = h*0.5;dy += Math.sin(id*4547.411)*h*0.1;if (t < 0.33) {rocket(dx, dy, id, t*3);} else {explosion(pts, dx, dy, id, Math.min(1, Math.max(0, t-0.33)*2));}
}function rocket(x, y, id, t) {ctx.fillStyle = 'white';let r = 2-2*t + Math.pow(t, 15*t)*16;y = h - y*t;circle(x, y, r)
}function explosion(pts, x, y, id, t) {let dy = (t*t*t)*20;let r = Math.sin(id)*1 + 3  r = t<0.5 ? (t+0.5)*t*r:r-t*rctx.fillStyle = `hsl(${id*55}, 55%, 55%)`;pts.forEach((xy,i) => {if (i%20 === 0)ctx.fillStyle = `hsl(${id*55}, 55%, ${55+t*Math.sin(t*55+i)*45}%)`;circle(t*xy[0] + x, h - y + t*xy[1] + dy, r)});
}function circle(x,y,r) {ctx.beginPath();ctx.ellipse(x, y, r, r, 0, 0, 6.283);ctx.fill();
}