html中使用canvas实现星空特效

冰淇淋咯

于 2024-06-28 16:03:48 发布

阅读量167

点赞数 1

分类专栏：娱乐文章标签： html javascript 前端

本文链接：https://blog.csdn.net/GKISX1216/article/details/140045836

版权

娱乐专栏收录该内容

3 篇文章 1 订阅

订阅专栏

实现思路：

HTML结构：

使用了一个<canvas>元素来绘制星空效果。

CSS样式：

设置了全屏背景为黑色，并使canvas元素充满整个屏幕。

JavaScript脚本：

获取canvas元素和2D上下文。
初始化星星数组，每个星星有随机的位置、半径和速度，随机颜色生成函数。
使用requestAnimationFrame创建动画循环，每帧更新星星的位置并重新绘制。
添加了窗口大小变化的事件监听器，确保画布大小随窗口变化而更新。

效果图：

代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        margin: 0;
        overflow: hidden;
        background-color: #000;
      }
      canvas {
        display: block;
      }
    </style>
  </head>
  <body>
    <canvas id="starrySky"></canvas>
  </body>
  <script>
    // 获取canvas元素和上下文
    const canvas = document.getElementById("starrySky");
    const ctx = canvas.getContext("2d");

    // 设置canvas的尺寸为整个窗口
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    // 创建星星的数组
    let stars = [];
    const numStars = 500; // 星星的数量

    // 初始化星星的位置、大小、颜色和透明度
    for (let i = 0; i < numStars; i++) {
      stars.push({
        x: Math.random() * canvas.width,
        y: Math.random() * canvas.height,
        radius: Math.random() * 1.5 + 0.5, // 半径在0.5到2之间
        opacity: Math.random() * 1, // 透明度在0.5到1之间
        color: getRandomColor(), // 随机颜色函数
        vx: Math.random() * 0.5 - 0.25, // x轴速度在-0.25到0.25之间
        vy: Math.random() * 0.5 - 0.25, // y轴速度在-0.25到0.25之间
      });
    }

    // 随机颜色生成函数
    function getRandomColor() {
      const r = Math.floor(Math.random() * 256);
      const g = Math.floor(Math.random() * 256);
      const b = Math.floor(Math.random() * 256);
      return `rgba(${r}, ${g}, ${b}, 1)`;
    }

    // 更新并绘制星星
    function draw() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);

      for (let i = 0; i < stars.length; i++) {
        let star = stars[i];

        // 更新星星的位置
        star.x += star.vx;
        star.y += star.vy;

        // 如果星星超出了画布边界，重新随机位置
        if (
          star.x < 0 ||
          star.x > canvas.width ||
          star.y < 0 ||
          star.y > canvas.height
        ) {
          star.x = Math.random() * canvas.width;
          star.y = Math.random() * canvas.height;
        }

        // 改变星星的透明度来实现闪烁效果
        star.opacity -= 0.005; // 透明度每帧减少
        if (star.opacity <= 0) {
          star.opacity = 1; // 透明度重新设为1，重新闪烁
          star.color = getRandomColor(); // 更换颜色
          // star.color = "#fff";
        }

        // 绘制星星
        ctx.beginPath();
        ctx.arc(star.x, star.y, star.radius, 0, Math.PI * 2);
        // ctx.fillText("❥(^_-)", star.x, star.y);
        // ctx.fillText("❤", star.x, star.y);
        ctx.fillStyle = star.color; // 使用星星对象中的颜色属性
        ctx.fill();
      }

      requestAnimationFrame(draw);
    }

    // 开始绘制星空
    draw();

    // 监听窗口大小变化，重新设置canvas大小
    window.addEventListener("resize", function () {
      canvas.width = window.innerWidth;
      canvas.height = window.innerHeight;
    });
  </script>
</html>