网页烟花效果

最新推荐文章于 2024-02-15 21:30:09 发布

CodeCraze

最新推荐文章于 2024-02-15 21:30:09 发布

阅读量304

点赞数 1

分类专栏： HTML 文章标签： html javascript css

本文链接：https://blog.csdn.net/qq_64453183/article/details/130226975

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>

<html>

<head>

 <title>放烟花</title>

 <style>

  body {
background-color: black;
}

  canvas {

position:absolute;

top:0px;

left: 0;
right: 0;
bottom: 0;
z-index: -1;

}

</style>

</head>

<body>

 <canvas id="fireworks"></canvas>



 <script>

  // 创建画布和烟花效果

  var canvas = document.getElementById("fireworks");

  canvas.width = window.innerWidth;

  canvas.height = window.innerHeight;



  var fireworks = new Fireworks(canvas);

  fireworks.start();



  // 烟花效果类

  function Fireworks(canvas) {

   var ctx = canvas.getContext("2d");

   var particles = [];



   // 烟花效果的配置

   var settings = {

    particleCount: 100,

    lifespan: 1000,

    colors: ["red", "orange", "yellow", "green", "blue", "purple"],

    speed: 5,

    angleRange: {

     min: 0,

     max: 360

    },

    gravity: 0.05

   };



   // 创建新的粒子

   function createParticle(x, y) {

    var particle = {

     x: x,

     y: y,

     vx: Math.cos(Math.random() * Math.PI * 2) * settings.speed,

     vy: Math.sin(Math.random() * Math.PI * 2) * settings.speed,

     lifespan: settings.lifespan,

     color: settings.colors[Math.floor(Math.random() * settings.colors.length)]

    };

    particles.push(particle);

   }



   // 绘制粒子

   function drawParticle(particle) {

    ctx.beginPath();

    ctx.arc(particle.x, particle.y, 5, 0, Math.PI * 2);

    ctx.fillStyle = particle.color;

    ctx.fill();

   }



   // 更新粒子状态

   function updateParticles() {

    for (var i = particles.length - 1; i >= 0; i--) {

     var particle = particles[i];



     // 更新位置和速度

     particle.x += particle.vx;

     particle.y += particle.vy;

     particle.vy += settings.gravity;



     // 减少粒子寿命

     particle.lifespan--;



     // 删除死亡的粒子

     if (particle.lifespan <= 0) {

      particles.splice(i, 1);

     }

    }

   }



   // 绘制烟花效果

   function drawFireworks() {

    ctx.clearRect(0, 0, canvas.width, canvas.height);



    // 创建新的粒子

    for (var i = 0; i < settings.particleCount; i++) {

     createParticle(canvas.width / 2, canvas.height);

    }



    // 绘制粒子

    for (var i = 0; i < particles.length; i++) {

     drawParticle(particles[i]);

    }



    // 更新粒子状态

    updateParticles();

   }

  this.start = function() {

   setInterval(drawFireworks, 30);

  };

 }

</script>

</body>

</html>

你可以将这段代码保存为一个.html文件，并在浏览器中打开它，即可看到一个简单的烟花效果。如果你想要进一步了解如何在网页中使用canvas元素来创建动画效果，可以参考MDN文档中的Canvas教程。