在浏览器里玩艺术，自己动手制作文字粒子流特效！

2023-12-10 20:17:36

Canvas画布：打造交互式网页的绘画工具

我们每天在网络上浏览的网页，背后隐藏着无数的技术，这些技术共同作用，打造了我们习以为常的交互式体验。其中，Canvas 画布就是一项关键技术，它为网页开发人员提供了绘制图形、动画和交互界面的强大工具。

什么是Canvas？

Canvas并不是我们日常生活中用于绘画的画布，而是HTML5中引入的一种网页元素，通过JavaScript API进行操作。它本质上是一个矩形区域，可以通过JavaScript在其中绘制图形、文字和图像，甚至实现复杂的动画效果。

创建Canvas画布

在HTML代码中创建Canvas画布非常简单，只需使用<canvas>标签即可：

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

其中：

id ：Canvas画布的唯一标识符
width ：Canvas画布的宽度（以像素为单位）
height ：Canvas画布的高度（以像素为单位）

在Canvas上绘图

创建画布后，就可以通过JavaScript在上面进行绘制了。下面是一个简单的示例，可以在Canvas画布上绘制一个黑色矩形和一个白色文本：

<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 设置画笔颜色为黑色
ctx.fillStyle = 'black';

// 填充整个画布
ctx.fillRect(0, 0, canvas.width, canvas.height);

// 设置文本颜色为白色
ctx.fillStyle = 'white';

// 设置字体样式
ctx.font = 'bold 48px Arial';

// 在画布上绘制文本
ctx.fillText('你好，世界！', 200, 200);
</script>

通过这段代码，你可以在Canvas画布上看到一个黑色的矩形和白色的文本“你好，世界！”。

使用requestAnimationFrame创建动画

Canvas的真正强大之处在于它可以创建动画效果。requestAnimationFrame 函数是实现这一目标的关键工具，它告诉浏览器在你每次刷新屏幕时调用一个指定函数，从而更新动画。

粒子流特效

让我们创建一个简单的粒子流特效，展示requestAnimationFrame的强大功能：

<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 创建粒子数组
const particles = [];
for (let i = 0; i < 100; i++) {
  particles.push({
    x: Math.random() * canvas.width,
    y: Math.random() * canvas.height,
    vx: Math.random() * 10 - 5,
    vy: Math.random() * 10 - 5,
    radius: Math.random() * 5 + 1,
    color: `rgba(${Math.random() * 255}, ${Math.random() * 255}, ${Math.random() * 255}, 1)`
  });
}

// 每一帧更新粒子
function update() {
  // 清除画布
  ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  // 更新每个粒子
  for (let i = 0; i < particles.length; i++) {
    const particle = particles[i];

    // 更新粒子的位置
    particle.x += particle.vx;
    particle.y += particle.vy;

    // 如果粒子超出画布范围，则将其移回画布内
    if (particle.x < 0) {
      particle.x = canvas.width;
    } else if (particle.x > canvas.width) {
      particle.x = 0;
    }
    if (particle.y < 0) {
      particle.y = canvas.height;
    } else if (particle.y > canvas.height) {
      particle.y = 0;
    }

    // 绘制粒子
    ctx.fillStyle = particle.color;
    ctx.beginPath();
    ctx.arc(particle.x, particle.y, particle.radius, 0, Math.PI * 2);
    ctx.fill();
  }

  // 请求下一次动画帧
  requestAnimationFrame(update);
}

// 开始动画
update();
</script>