如何实现JavaScript动画实例中的长尾词粒子文本效果？

本文共计1342个文字，预计阅读时间需要6分钟。

1. 粒子文本的实现原理+粒子文本的实现原理是：使用两张canvas，一张是用户看不到的canvas1，用来绘制文本；另一张是用户看到的canvas2，用来根据canvas1中绘制的文本数据生成粒子。

1．粒子文本的实现原理

粒子文本的实现原理是：使用两张 canvas，一张是用户看不到的canvas1，用来绘制文本；另一张是用户看到的canvas2，用来根据canvas1中绘制的文本数据来生成粒子。

先在canvas1中用如下的语句绘制待显示的文本。

ctx1.font = '100px PingFang SC'; ctx1.textAlign = 'center'; ctx1.baseline = 'middle'; ctx1.fillText('Happy New Year',canvas1.width/2, canvas1.height/2);

然后使用canvas API的getImageData方法，获取一个ImageData对象，这个对象用来描述 canvas 指定区域内的像素数据。语句为：var imgData = ctx1.getImageData(0, 0, canvas1.width, canvas1.height).data;

这样imgData中保存了canvas1指定区域内所有像素点的rgba值，它是一个数组。由于每个像素点有 rgba 四个值，所以这个数组的长度也就是“像素点数量 * 4”。