HTML5Canvas文字粒子动画自定义效果

自定义文字的粒子动画还挺酷的，尤其是在 Canvas 上搞点动效，真的能给页面加不少分。这个效果的核心思路就是把文字“打散”成无数粒子，用 requestAnimationFrame 来做动画循环。粒子可以设置不同的速度、颜色、透明度，还能跟着鼠标互动，视觉冲击力挺强。

HTML5 Canvas 的 getContext('2d') 是入口，先拿到绘图上下文，你可以用 fillText 把文字画出来，再用像 getImageData 这样的方式把每个像素提出来，生成粒子数组。下一步就靠你循环更新这些粒子的位置来制造动画感。

可以写一个粒子构造函数，设置下初始位置和速度，像这样：

function Particle(x, y) {
  this.x = x;
  this.y = y;
  this.vx = Math.random() * 2 - 1;
  this.vy = Math.random() * 2 - 1;
}

在动画循环里更新粒子的位置，用 ctx.clearRect 清除画布，再重绘每一帧。粒子动起来后你可以加点玩法，比如靠近鼠标的粒子加速，或者粒子碰到边界反弹，蛮有意思的。

还有一点比较重要：粒子太多的话性能会掉，尤其在移动端。所以建议你根据画布大小和分辨率来动态调整粒子密度，或者用 requestAnimationFrame 加节流。

想深入研究的话，推荐几个类似的资源：

• html5canvas 鼠标圆点粒子交互式动画特效
• html5 文字特效 canvas 画图文字粒子动画效果代码
• HTML5 粒子效果文字动画.zip

如果你正好在做登录页、404 页面或者活动页面，这种文字粒子动画加上点互动效果，视觉上挺抓眼的。可以试试加在 Canvas 背景里，嗯，效果还挺惊艳的～