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

写在最前

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

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

起因

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

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

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

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

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

从hello world看JavaScript隐藏的黑魔法

效果图

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

示例：

基于canvas使用粒子拼出你想要的文字相关推荐

基于canvas使用粒子拼出你想要的文字[2]——粒子的动画效果
写在最前本次分享一个用canvas粒子渲染文字的"完整"版实现,功能包括:随机粒子缓动动画,粒子汇聚.发散,并拼出你想要的文字.本文继续上面一节基于canvas使用粒子拼出你想要 ...
Php字符拼出心形,怎么用文字拼成心形？名字心形图案怎么做？文字拼成一个爱心怎么制作？告白图片制作...
昨天说明天就是七夕节了,那么今天呢~就是七夕啦,不过小编家乡那边不把七夕当情人节过的,反而是虚岁十五岁少年的成人礼,可隆重了呢~但是此刻不在老家的小编还是不能免俗的要把今天当成情人节啊,虽然是只单身汪 ...
Php字符拼出心形,canvas实现九宫格心形拼图的方法（附代码）-
这篇文章给大家介绍的内容是关于canvas实现九宫格心形拼图的方法(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 说明前几天在朋友圈看到好几次这种图片. 用其中的小格子, ...
Canvas基础-粒子动画Part2
紧接上一篇文章 Canvas基础-粒子动画Part1 其实这篇早在一个星期之前就应该发了,无奈事情太多,而且我又跑去写微信公众号了. 粒子动起来有了上一篇的基础,我们已经可以获得粒子,并将轮廓显示在 ...
css制作俄罗斯方块,H5原创俄罗斯方块（基于canvas）
第一次写俄罗斯方块的时候已经是1年多前了,也是我刚刚学js不久. 为了加强对js的理解又加上对游戏的爱好,于是在没有参考他人的思路和代码下,自己用最基本的js代码写出了基于canvas的俄罗斯方块. ...
基于Canvas的动画基本原理与数理分析
转载自https://www.jianshu.com/p/e70c9cfbdb38 什么是动画? 就像思考哲学问题无法回避思维和存在的关系一样,制作动画同样无法逃避的问题是动画的原理是什么?这里提一句 ...
Javascript Canvas 实现粒子动画效果分享
今天和大家一起分享一下用 canvas 实现粒子动画效果的实现,就像下图的效果要实现这样的效果,我们首先需要一段包含了 canvas 的基础 html 代码 <!DOCTYPE html> ...
html5在线俄罗斯方块,Html5原创俄罗斯方块（基于canvas）
第一次写俄罗斯方块的时候已经是1年多前了,也是我刚刚学js不久. 为了加强对js的理解又加上对游戏的爱好,于是在没有参考他人的思路和代码下,自己用最基本的js代码写出了基于canvas的俄罗斯方块. ...
HTML5基于canvas的网页绘画系统
绘画是一种在平面上以手工方式临摹自然或非自然,以其达到二维(平面或三维)效果的艺术,在中世纪的欧洲,常把绘画称作"猴子的艺术",因为如同猴子喜欢模仿人类活动一样,绘画也是模仿场景. ...
用php 用拼出一个菱形_这可是我没来过的杭州呀！远在开封的他，用一种特殊的方式，拼出一个彩色杭州...
天气晴好的日子,一起骑车出游. 西湖,除了美,还有爱情. 杭友圈达人"幽默之余":我并不是杭州人,在河南开封工作,但和杭州,和都市快报,已经有近10年的感情了.因为喜欢摄影,从最早 ...

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

写在最前

起因

效果图

基于canvas使用粒子拼出你想要的文字相关推荐

最新文章

热门文章