基于canvas使用粒子拼出你想要的文字

写在最前

本次分享一下使用canvas实现粒子效果拼出你想要的文字。

欢迎关注我的博客，不定期更新中——

起因

不久之前看到大搜车团队出品的easy mock产品的界面中有一个使用粒子拼出“mock so easy”的效果，感觉非常有意思，就像下面这样：

当然了，这个easy mock的界面中还有粒子汇聚、散开、以及缓动等效果，这些在之后的文章中会不定时的更新实现思路。

我当时看到这个效果的时候是一段单一的英文，不知道源码能不能支持自己配置需要的字符，故想自己实现一个可以配置的版本。

PS:突然想到作者之前也封装过一个输入一段英文，输出一段可表示该字母的“黑魔法代码”：效果就像下面这样：

缘由也是网上有人用这种黑魔法代码拼出了单词，但是并不是“可配置”的，也就不能想要啥就是啥，故才有了作者的一版封装实现，文章如下：（相关代码在原文中提及

• 从hello world看JavaScript隐藏的黑魔法

效果图

你可以任意输入你能想到的字符，只要打得进去：）

示例：