2024新年快乐烟花代码

2023-12-31 12:25:17

一、前言

很快就是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*r
  ctx.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();
}

三、效果

资源获取：?烟花动态最新新年快乐烟花html代码资源-CSDN文库

文章来源:https://blog.csdn.net/m0_46013789/article/details/135314550
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。