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

news2024/9/26 1:27:46

✨博主：命运之光

🌸专栏：Python星辰秘典

🐳专栏：web开发（简单好用又好看）

❤️专栏：Java经典程序设计

☀️博主的其他文章：点击进入博主的主页

前言：欢迎踏入我的Web项目专栏，一段神奇而令人陶醉的数字世界！

🌌在这里，我将带您穿越时空，揭开属于Web的奥秘。通过HTML、CSS和JavaScript的魔力，我创造了一系列令人惊叹的Web项目，它们仿佛是从梦境中涌现而出。

🌌在这个专栏中，您将遇到华丽的界面，如流星划过夜空般迷人；您将感受到动态的交互，如魔法般让您沉浸其中；您将探索响应式设计的玄妙，让您的屏幕变幻出不同的绚丽景象。

🌌无论您是一个探险家还是一位嗜血的代码巫师，这个专栏将成为您的魔法书。我将分享每个项目的秘密，解开编码的谜题，让您也能够拥有制作奇迹的力量。

🌌准备好了吗？拿起您的键盘，跟随我的指引，一起进入这个神秘而充满惊喜的数字王国。在这里，您将找到灵感的源泉，为自己创造出一段奇幻的Web之旅！

简介

动态图展示

静态图展示

准备工作

绘制彩色粒子

运行效果

完整代码

代码的使用方法（超简单什么都不用下载）

🍓1.打开记事本

🍓2.将上面的源代码复制粘贴到记事本里面将文件另存为HTML文件点击保存即可

🍓3.打开html文件（大功告成(●'◡'●)）

总结

简介

欢迎来到本篇技术博客！今天，我们将一起学习如何使用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>