打造你的专属视觉盛宴：用Canvas绘制迷人的随机粒子动画

前端

2023-10-01 15:03:57

在Canvas上舞动的粒子

Canvas，一个神奇的画布，为我们提供了在网页上自由绘制和创建视觉效果的强大功能。在这个奇妙的画布上，我们可以用代码描绘生动的图像、流畅的动画，甚至可以模拟物理现象。

其中，粒子动画因其美妙的视觉效果和无穷的可能性而备受青睐。通过控制粒子的行为，我们可以创造出令人惊叹的图案、漩涡和爆炸效果。

个性化你的粒子动画

但何不更进一步，打造一款可以根据你的喜好进行个性化配置的随机粒子动画呢？使用JavaScript，我们就能轻松实现这一目标。

设置舞台：创建Canvas

首先，我们需要创建一个Canvas元素，作为动画的舞台。这段代码将创建Canvas并将其附加到页面中：

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

画笔准备：获取Canvas上下文

接下来，我们获取Canvas的绘图上下文，这将使我们能够在Canvas上绘制形状和应用样式：

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

粒子生成器：创造粒子

为了生成随机粒子，我们需要一个函数。这个函数将生成一个具有指定位置、速度和颜色的粒子对象：

function createParticle(x, y, dx, dy, radius, color) {
  return {
    x: x,
    y: y,
    dx: dx,
    dy: dy,
    radius: radius,
    color: color,
  };
}

粒子阵列：粒子集合

接下来，我们需要一个粒子数组来存储所有生成的粒子：

const particles = [];

定制你的粒子动画

现在到了发挥创造力的时刻！通过修改以下变量，你可以个性化你的粒子动画：

particleCount： 指定动画中的粒子数量。
minRadius、maxRadius： 设置粒子的最小和最大半径。
minSpeed、maxSpeed： 控制粒子的最小和最大速度。
colors： 定义粒子的颜色数组。

const particleCount = 100;
const minRadius = 1;
const maxRadius = 5;
const minSpeed = 0.1;
const maxSpeed = 1;
const colors = ["#FF0000", "#00FF00", "#0000FF", "#FFFF00", "#FF00FF"];

动画引擎：让粒子动起来

为了让粒子动起来，我们需要一个动画循环。该循环将不断更新粒子的位置，并在Canvas上重新绘制它们：

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);  // 清除Canvas

  // 更新每个粒子的位置
  for (let i = 0; i < particles.length; i++) {
    particles[i].x += particles[i].dx;
    particles[i].y += particles[i].dy;

    // 处理边界碰撞
    if (particles[i].x < 0 || particles[i].x > canvas.width) {
      particles[i].dx *= -1;
    }
    if (particles[i].y < 0 || particles[i].y > canvas.height) {
      particles[i].dy *= -1;
    }
  }

  // 绘制粒子
  for (let i = 0; i < particles.length; i++) {
    ctx.beginPath();
    ctx.arc(particles[i].x, particles[i].y, particles[i].radius, 0, Math.PI * 2);
    ctx.fillStyle = particles[i].color;
    ctx.fill();
  }

  requestAnimationFrame(animate);  // 下一帧继续动画
}

初始化粒子动画

在加载页面时，我们可以调用一个初始化函数来生成粒子并启动动画循环：

function init() {
  // 生成粒子
  for (let i = 0; i < particleCount; i++) {
    const x = Math.random() * canvas.width;
    const y = Math.random() * canvas.height;
    const dx = (Math.random() - 0.5) * (maxSpeed - minSpeed) + minSpeed;
    const dy = (Math.random() - 0.5) * (maxSpeed - minSpeed) + minSpeed;
    const radius = Math.random() * (maxRadius - minRadius) + minRadius;
    const color = colors[Math.floor(Math.random() * colors.length)];

    particles.push(createParticle(x, y, dx, dy, radius, color));
  }

  animate();
}