2024新年快乐烟花代码_新年快乐代码特效2024

作者：花生_TL007 | 2024-02-27 01:58:48

踩

新年快乐代码特效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*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文库

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/149146?site