本文介绍了Canvas 文本转粒子效果的实现代码，分享给大家，希望对大家有所帮助，具体如下：
通过粒子来绘制文本让人感觉很有意思，配合粒子的运动更会让这个效果更加酷炫。本文介绍在 canvas 中通过粒子来绘制文本的方法。
实现原理
总的来说要做出将文本变成粒子展示的效果其实很简单，实现的原理就是使用两张 canvas，一张是用户看不到的 A canvas，用来绘制文本；另一张是用户看到的 B canvas，用来根据 A 的文本数据来生成粒子。直观表示如图：
创建离屏 canvas
HTML 只需要放置主 canvas 即可：
<!-- HTML 结构 -->
<html>
<head>
...
</head>
<body>
<canvas id="stage"></canvas>
</body>
</html>然后创建一个离屏 canvas，并绘制文本：
const WIDTH = window.innerWidth;
const HEIGHT = window.innerHeight;const offscreenCanvas = document.createElement('canvas');
const offscreenCtx = offscreenCanvas.getContext('2d');
offscreenCanvas.width = WIDTH;
offscreenCanvas.height = HEIGHT;
offscreenCtx.font = '100px PingFang SC';
offscreenCtx.textAlign = 'center';
offscreenCtx.baseline = 'middle';
offscreenCtx.fillText('Hello', WIDTH / 2, HEIGHT / 2);
这时页面上什么也没有发生，但实际上可以想象在离屏 canvas 上，此时应该如图所示：
核心方法 getImageData
使用 canvas 的 getImageData 方法，可以获取一个
ImageData 对象，这个对象用来描述 canvas 指定区域内的像素数据。也就是说，我们可以获取 “Hello” 这个文本每个像素点的位置和颜色，也就可以在指定位置生成粒子，最后形成的效果就是粒子拼凑成文本了。要获取像素信息，需要使用
ImageData 对象的
data 属性，它将所有像素点的 rgba 值铺开成了一个数组，每个像素点有 rgba 四个值，这个数组的个数也就是
像素点数量 * 4。假设我选取了一个
3 * 4 区域，那么一共 12 个像素点，每个像素点有 rgba 四个值，所以 data 这个数组就会有
