本文主要是介绍基于canvas使用粒子拼出你想要的文字,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
写在最前
本次分享一下使用canvas实现粒子效果拼出你想要的文字。
欢迎关注我的博客,不定期更新中——
起因
不久之前看到大搜车团队出品的easy mock产品的界面中有一个使用粒子拼出“mock so easy”的效果,感觉非常有意思,就像下面这样:
当然了,这个easy mock的界面中还有粒子汇聚、散开、以及缓动等效果,这些在之后的文章中会不定时的更新实现思路。
我当时看到这个效果的时候是一段单一的英文,不知道源码能不能支持自己配置需要的字符,故想自己实现一个可以配置的版本。
PS:突然想到作者之前也封装过一个输入一段英文,输出一段可表示该字母的“黑魔法代码”:效果就像下面这样:
缘由也是网上有人用这种黑魔法代码拼出了单词,但是并不是“可配置”的,也就不能想要啥就是啥,故才有了作者的一版封装实现,文章如下:(相关代码在原文中提及
- 从hello world看JavaScript隐藏的黑魔法
效果图
你可以任意输入你能想到的字符,只要打得进去:)
示例:
这篇关于基于canvas使用粒子拼出你想要的文字的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!