❤️创意网页：炫酷的网页 - 创造华丽粒子动画

命运之光

发布于 2024-03-20 12:45:25

1590

发布于 2024-03-20 12:45:25

文章被收录于专栏：我在本科期间写的文章

简介

欢迎来到本篇技术博客！今天，我们将一起学习如何使用HTML5 Canvas和JavaScript创造一个炫酷的网页效果。我们将绘制彩色粒子并让它们在画布上随机运动，形成华丽的粒子动画。让我们开始吧！

动态图展示

静态图展示

准备工作

在开始之前，我们需要做一些准备工作：

确保您有一个支持HTML5的现代web浏览器（如Chrome、Firefox、Safari等）。

创建一个HTML文件，并复制以下代码作为基础：

<!DOCTYPE html>
<html>
<head>
  <title>炫酷的网页</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }
    canvas {
      display: block;
    }
  </style>
</head>
<body>
  <canvas id="myCanvas"></canvas>

  <script>
    // JavaScript代码将在下面添加
  </script>
</body>
</html>

绘制彩色粒子

在我们的HTML文件中，我们已经有了一个空的Canvas元素，其ID为myCanvas，并且我们已经设置了Canvas的宽度和高度与窗口大小相同。接下来，我们将添加JavaScript代码来绘制彩色粒子。

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const width = window.innerWidth;
const height = window.innerHeight;

canvas.width = width;
canvas.height = height;

const particles = [];
const particleCount = 100;
const particleSpeed = 2;
const particleSize = 5;
const colors = ["#E74C3C", "#3498DB", "#2ECC71", "#F1C40F", "#E67E22"];

class Particle {
  // ... 粒子构造函数的代码 ...
}

function createParticles() {
  // ... 创建粒子的代码 ...
}

function animate() {
  // ... 动画循环函数的代码 ...
}

createParticles();
animate();

在这段代码中，我们定义了一些用于绘制彩色粒子的变量，包括particles数组用于存储粒子对象、particleCount用于指定粒子的数量、particleSpeed用于指定粒子的运动速度、particleSize用于指定粒子的大小、以及colors数组用于存储粒子的颜色。

接下来，我们定义了一个Particle类用于构造粒子对象。在构造函数中，我们将粒子的初始位置设置为画布中心，并随机选择一个颜色和运动角度。

最后，我们定义了createParticles函数用于在页面加载时创建粒子，并将它们存储在particles数组中。我们还定义了一个animate函数用于在动画循环中绘制和更新粒子的位置，并使用requestAnimationFrame方法实现动画效果。

运行效果

现在，将上述HTML代码保存为一个HTML文件，并在浏览器中打开它。您将会看到一个空白的页面，但当您刷新页面时，彩色粒子将在画布上随机运动，形成一个炫酷的视觉效果。

完整代码

<!DOCTYPE html>
<html>
<head>
  <title>炫酷的网页</title>
  <style>
    body {
      margin: 0;
      overflow: hidden;
    }
    canvas {
      display: block;
    }
  </style>
</head>
<body>
  <canvas id="myCanvas"></canvas>

  <script>
    const canvas = document.getElementById("myCanvas");
    const ctx = canvas.getContext("2d");
    const width = window.innerWidth;
    const height = window.innerHeight;

    canvas.width = width;
    canvas.height = height;

    const particles = [];
    const particleCount = 100;
    const particleSpeed = 2;
    const particleSize = 5;
    const colors = ["#E74C3C", "#3498DB", "#2ECC71", "#F1C40F", "#E67E22"];

    class Particle {
      constructor() {
        this.x = width / 2;
        this.y = height / 2;
        this.color = colors[Math.floor(Math.random() * colors.length)];
        this.angle = Math.random() * 360;
        this.speed = Math.random() * particleSpeed;
      }

      update() {
        this.x += Math.cos(this.angle) * this.speed;
        this.y += Math.sin(this.angle) * this.speed;

        if (this.x < 0 || this.x > width || this.y < 0 || this.y > height) {
          this.x = width / 2;
          this.y = height / 2;
        }
      }

      draw() {
        ctx.beginPath();
        ctx.arc(this.x, this.y, particleSize, 0, Math.PI * 2);
        ctx.fillStyle = this.color;
        ctx.fill();
      }
    }

    function createParticles() {
      for (let i = 0; i < particleCount; i++) {
        particles.push(new Particle());
      }
    }

    function animate() {
      ctx.clearRect(0, 0, width, height);

      for (const particle of particles) {
        particle.update();
        particle.draw();
      }

      requestAnimationFrame(animate);
    }

    createParticles();
    animate();
  </script>
</body>
</html>