用 Canvas 来做酷炫的粒子文字效果，妙不可言

前端

2023-10-19 20:28:21

用 Canvas 打造粒子文字效果，让你的文字动感十足！

简介

粒子文字效果是一种引人入胜的网页特效，它让你的文字在屏幕上翩翩起舞，形成一场视觉盛宴。这种效果通常借助 Canvas 实现，后者是一种强大的 HTML5 元素，用于在网页上创造各种动态图像。

准备就绪

开始之前，我们需要做好一些准备工作。首先，新建一个 HTML 文件和一个 JavaScript 文件，并将它们关联起来。然后，在 JavaScript 文件中引入 Canvas 库，以便使用其 API 创建动画效果。

创建画布

接下来，让我们创建画布并将其添加到 HTML 文件中。以下代码可帮助你实现：

<canvas id="canvas" width="600" height="400"></canvas>

这里，id 属性指定画布的 ID，而 width 和 height 属性分别指定画布的宽度和高度。

获取画布上下文

创建画布后，我们需要获取它的上下文，才能在上面绘制图形。使用以下代码来实现：

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

其中，canvas 是画布的 ID，ctx 是它的上下文。

绘制粒子

现在，让我们绘制一些粒子。粒子是极微小的物体，可以在空间中自由移动。以下代码可帮助你实现：

function drawParticle(x, y, radius) {
  ctx.beginPath();
  ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
  ctx.fillStyle = "white";
  ctx.fill();
}

其中，x 和 y 是粒子的位置，radius 是它的半径。

移动粒子

为了让粒子动起来，我们需要移动它们。以下代码可以做到这一点：

function moveParticle(particle) {
  particle.x += particle.vx;
  particle.y += particle.vy;
}

这里，particle 是粒子对象，particle.x 和 particle.y 是它的位置，particle.vx 和 particle.vy 是它的速度。

碰撞检测

为了防止粒子穿过画布边缘，我们需要进行碰撞检测。以下代码可帮助你实现：

function checkCollision(particle) {
  if (particle.x < 0 || particle.x > canvas.width) {
    particle.vx = -particle.vx;
  }
  if (particle.y < 0 || particle.y > canvas.height) {
    particle.vy = -particle.vy;
  }
}

其中，particle 是粒子对象，canvas.width 和 canvas.height 分别是画布的宽度和高度。

渲染粒子

最后，我们需要将粒子渲染到画布上。以下代码可帮助你实现：

function renderParticles() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (let i = 0; i < particles.length; i++) {
    drawParticle(particles[i].x, particles[i].y, particles[i].radius);
    moveParticle(particles[i]);
    checkCollision(particles[i]);
  }
  requestAnimationFrame(renderParticles);
}

其中，particles 是粒子数组，drawParticle() 函数绘制粒子，moveParticle() 函数移动粒子，checkCollision() 函数进行碰撞检测，requestAnimationFrame() 函数请求浏览器在下一次重绘前调用指定函数。

示例代码

以下是一个完整的示例代码：

<!DOCTYPE html>
<html>
  <head>
    <script src="script.js"></script>
  </head>
  <body>
    <canvas id="canvas" width="600" height="400"></canvas>
  </body>
</html>

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

const particles = [];

function drawParticle(x, y, radius) {
  ctx.beginPath();
  ctx.arc(x, y, radius, 0, 2 * Math.PI, false);
  ctx.fillStyle = "white";
  ctx.fill();
}

function moveParticle(particle) {
  particle.x += particle.vx;
  particle.y += particle.vy;
}

function checkCollision(particle) {
  if (particle.x < 0 || particle.x > canvas.width) {
    particle.vx = -particle.vx;
  }
  if (particle.y < 0 || particle.y > canvas.height) {
    particle.vy = -particle.vy;
  }
}

function renderParticles() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  for (let i = 0; i < particles.length; i++) {
    drawParticle(particles[i].x, particles[i].y, particles[i].radius);
    moveParticle(particles[i]);
    checkCollision(particles[i]);
  }
  requestAnimationFrame(renderParticles);
}

for (let i = 0; i < 100; i++) {
  const particle = {
    x: Math.random() * canvas.width,
    y: Math.random() * canvas.height,
    radius: Math.random() * 5,
    vx: (Math.random() - 0.5) * 2,
    vy: (Math.random() - 0.5) * 2,
  };
  particles.push(particle);
}

renderParticles();