canvas rotate 累加旋转_震惊,canvas文字粒子效果,只需要100行代码,简单易懂。

ef4ece617d879e115ce51144a3049f2e.png

震惊,canvas文字粒子效果,只需要100行代码,简单易懂。

canvas是使用JavaScript程序绘图(动态生成),相比于css,可以更加简单方便的绘制细节的样式。其中最强大的功能莫过去像素的处理。一个像素一个像素去绘制任何想要的展示效果。接下来,要为各位观众姥爷去介绍一下文字动态粒子效果,当然是一些比较简单。如果各位观众姥爷感兴趣,可以在此基础上扩展

如何绘制文字粒子动态效果?

1.了解一下基本的canvas的Api,像画点,画圆,以及填充颜色等等。2.文字打碎,记录每个文字所在画布中的位置,本文的重点。3.生成随机粒子,并且设置每个粒子的运动轨迹。4.移动到步骤二记录下来位置。5.使用requestAnimationFrame来绘制每一帧的画布

就这么简单,只要100行代码,就能学会简单的文字动态效果

源码解析

主生成画布

了解基本的canvas API,怎么这么懒!!!!还要我给找地址。戳这里)

获取文字位置信息,还不想让用户看到,这就需要用到两个画布了,下面是创建主画布,设置画布的大小。

let 

生成副画布

创建一个副画布,里面写入想要展示的文字,获取到文字粒子的位置。这里要注意了,主画布和副画布大小要一样,这样副画布里面的点位,才能正确的在主画布中展示。副画布创建好后,无需添加到dom中。这里写入了文字 www,

function 


这里使用了方法measureText,获取文字的宽度,为了能够在画布中间绘制文字。高度居中,感兴趣的可以自行尝试。。

获取文字位置信息

如何获取文字的位置?上课了,划重点。

function 

data属性返回一个 Uint8ClampedArray,它可以被使用作为查看初始像素数据。每个像素用4个1bytes值(按照红,绿,蓝和透明值的顺序; 这就是"RGBA"格式) 来代表。每个颜色值部份用0至255来代表。每个部份被分配到一个在数组内连续的索引,左上角像素的红色部份在数组的索引0位置。像素从左到右被处理,然后往下,遍历整个数组

我这里使用的画布大小是 1080 * 768, 用坐标系来表示就是x轴1080,y轴768

其实就是RGBA(255,255,255,0) 这四个类似的数字表示一个像素,那1080*768这个画布用Uint8ClampedArray数组表示,总共由多少个元素呢?就是1080 * 768 * 4 个元素

下面画了一张简陋的坐标图。

3a8939cf20600d5ba6ec0355d02aa9ec.png

比如x轴(1,1)这个位置,需要用Uint8ClampedArray数组的前四位表示. x轴(2,1)这个位置,需要用Uint8ClampedArray索引4-7的元素表示。 那坐标(1,2)第一位对应表示Uint8ClampedArray索引就是(1080*(2-1) + (1-1)) * 4 -1 . 坐标(m,n)首位索引对应的就是(width*(n-1) + m-1)) * 4 -1。 不懂的观众姥爷可以慢慢品一下。~~~~~

这里还有一个小技巧,rgba表示的颜色,第四个元素表示透明度,当我们画布上并未绘制内容时,第四个元素位0。所以,源码中const fontIndex = (x + y * WIDTH) * 4 + 3 取到透明度不为0时候,则证明当前像素是有内容的,即可获取到文字在画布中的位置。

每个粒子的移动轨迹

上面一步获取了文字粒子在画布中的位置,我们想要的效果,是粒子动画, 则我们需要在随机生成一个粒子, 然后移动到对应的获取到的文字位置。

class 

这里,需要一个随机粒子, 用来做移动,并且最后要组成一个文字,文字的最终位置我们已经获取到了,就是constructor的参数center。那粒子该怎么运动呢?我这里使用的贝塞尔曲线,并且封装成了一个方法。

const 

简单的对参数说明

t:贝塞尔曲线系数,0-1之前。p1: 轨迹移动的起点。p2: 轨迹移动的终点。cp1: 第一个控制点。cp2: 第二个控制点。第四个参数和第五个参数可以瞎鸡儿传,主要是控制运动的轨迹,但是p1,p2这俩参数不能乱,尤其是p2。p2要是瞎鸡儿传,还想组成文字吗?

什么,不懂贝塞尔曲线?还不戳这里?)

扩展:如果文字想要五颜六色,可以在获取文字坐标时,

particles

随机朝构造器中加入一个颜色, 在Particle类中draw方法绘制时,赋值传入的颜色。

启动动画

文字位置,粒子运动轨迹也确定好了,下面该如何开启动画?如何暂停动画?

function 

requestAnimationFrame小记:cancelAnimationFrame取消动画,要跟在requestAnimationFrame后面。保证在递归调用init方法之前去执行cancelAnimationFrame。别忘了requestAnimationFrame是个异步~~~~

总结

今天的介绍canvas文字粒子效果到这里就结束了,如果还有问题的观众姥爷,可以在下面留言哟。

❤️ 如果各位看官看的还进行,请给一个赞,顺手点个关注,就是对我的最大支持

原作者姓名:https://juejin.im/post/5e70f6e0f265da57082a05b6
原出处:https://juejin.im/post/5e70f6e0f265da57082a05b6
原文链接:https://juejin.im/post/5e70f6e0f265da57082a05b6

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/488834.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CES 2020前瞻:一份最全的趋势预测报告

来源: CES20202020年,消费级技术领域的总体趋势可以总结为:最顶尖的产品将变得更强大、更完善。虽然我们并不喜欢“溢价”这个已经被用滥了的字眼,但不得不承认,新一年中溢价会成为新的常态。最好的东西会变得更好&…

Android pda出入库管理,出入库PDA管理系统软件

随着经济的高速发展,市场的日新月异,仓库管理越来越重要起来,企业里从原料的入库到成品的出库都需经过仓库来管理控制,仓库工作责任重大、数据即时准确犹为关键,现代企业大多都借助出入库管理系统软件来管控仓库&#…

一棵树的生物量怎么算_桂花开花小、开花少怎么办?四点建议送给你!

原标题:桂花开花小、开花少怎么办?四点建议送给你!虽然冬天绝大多数桂花都处在休眠期,生长缓慢,不开花,但四季桂花是个例外,只要温度合适养护得当,冬天也能让我们闻到桂花香。桂花开…

28篇标志性论文见证「自然语言处理NLP」2019-2020年度亮点进展

来源:专知【导读】自然语言处理专家elvis在medium博客上发表了关于NLP在2019年的亮点总结。对于自然语言处理(NLP)领域而言,2019年是令人印象深刻的一年。在这篇博客文章中,我想重点介绍一些我在2019年遇到的与机器学习…

spark while_05_尚硅谷大数据技术之Spark内核解析(1.1) - 十一vs十一

尚硅谷大数据课程之Spark内核解析(作者:尚硅谷大数据研发部)官网:版本:V1. Spark 内核概述Spark内核泛指Spark的核心运行机制,包括Spark核心组件的运行机制、Spark任务调度机制、Spark内存管理机制、Spark核心功能的运行原理等&am…

AI初创公司都去哪了?2019年科技公司“五巨头”收购盘点

大数据文摘出品来源:venturebeat人工智能人才的争夺大战愈演愈烈。 今年,Pinterest的首席技术官Vanja Josifovski离职加入了Airbnb,而Pinterest则聘请了沃尔玛的首席技术官Jeremy King来领导工程团队。此外,包括谷歌和苹果在内的所…

angular element()

使用angular.element()获取一个dom的方法。 1.可以使用jquery的选择器 2.可以使用javascript的原生查找元素的方法 下面是angular.element()提供的方法 <input type"checkbox" class"input" /><input type"text" class"input1&quo…

【前沿科技】看完这篇文章前,你绝对想象不到欧美航空机器人竟然发展到这个程度了!...

来源&#xff1a;中国机器人网《工程》杂志撰文认为&#xff0c;工业机器人在许多行业中已经建立了良好的基础&#xff0c;并且通常与现代化的先进制造系统相关联&#xff0c;但是&#xff0c;航空制造仍然严重依赖熟练的手工作业。航空制造中采用机器人的一个主要障碍是缺乏精…

beautifulsoup网页爬虫解析_Python爬虫快速入门,静态网页爬取

在开始之前&#xff0c;请确保你的电脑上已经安装好了BeautifulSoup库&#xff0c;可以通过在命令行中输入pip install beautifulsoup4来进行安装。一、数据解析在爬取之前&#xff0c;我们需要检测下响应状态码是否为200&#xff0c;如果请求失败&#xff0c;我们将爬取不到任…

当超级智能崛起时……

来源&#xff1a;资本实验室“大雷&#xff0c;你脑子没出啥毛病吧&#xff1f;”李春花轻声问道&#xff0c;眼睛里满是关切的神色。“喔&#xff0c;你放心&#xff0c;俺没事&#xff01;上次的事故之后&#xff0c;我的芯片和操作系统都已经升级到最新版本啦&#xff01;”…

小米小爱音箱Pro8安装app_小米小爱音箱HD获DXO评为第二!低音准确度很高

前几天&#xff0c;知名评测机构DXOMARK公布了用于测试无线音箱音质的新基准——DXOMARK Speaker。据了解&#xff0c;这个基准由百个测试汇集而成&#xff0c;该机构称这个基准为针对音箱产品唯一的科学评分。11月9日&#xff0c;该机构发文称&#xff0c;小米小爱音箱HD获得了…

Lua的垃圾回收机制详解

Lua 是一种轻量级的编程语言&#xff0c;广泛用于嵌入到其他应用程序中&#xff0c;尤其是在游戏开发领域。Lua 的内存管理机制采用了自动垃圾收集&#xff08;Garbage Collection&#xff09;的方法。以下是Lua内存管理的一些关键方面&#xff1a; 垃圾收集原理概述 Lua 使用…

2020年AI怎么发展?听加州大学、谷歌、英伟达、IBM怎么说

来源&#xff1a;机器之心AI 领域最杰出的头脑如何总结 2019 年技术进展&#xff0c;又如何预测 2020 年发展趋势呢&#xff1f;本文介绍了 Soumith Chintala、Celeste Kidd、Jeff Dean 等人的观点。人工智能不是将要改变世界&#xff0c;而是正在改变世界。在新年以及新的十年…

ip打包后如何加入 xilinx_科普!插上USB设备后电脑是怎么识别的呢?

欢迎FPGA工程师加入官方微信技术群每次当插上鼠标或者U盘的时候&#xff0c;电脑是怎么知道是什么设备的呢&#xff1f;这里用到的就是枚举了。枚举&#xff0c;其实就是让HOST认识这个USB涉笔&#xff0c;并且为该设备准备资源&#xff0c;建立好主机和设备之间的数据传递机制…

两院院士评选2019年中国、世界十大科技进展新闻揭晓

来源&#xff1a;科学网由中国科学院、中国工程院主办&#xff0c;中国科学院学部工作局、中国工程院办公厅、中国科学报社承办&#xff0c;中国科学院院士和中国工程院院士投票评选的2019年中国十大科技进展新闻、世界十大科技进展新闻&#xff0c;1月11日在京揭晓。此项年度评…

android炫酷叼ui,XUI: 一个简洁而优雅的Android原生UI框架,解放你的双手!

XUI一个简洁而又优雅的Android原生UI框架&#xff0c;解放你的双手&#xff01;还不赶紧点击使用说明文档&#xff0c;体验一下吧&#xff01;涵盖绝大部分的UI组件&#xff1a;TextView、Button、EditText、ImageView、Spinner、Picker、Dialog、PopupWindow、ProgressBar、Lo…

笔记本电脑麦克风在哪里_定制款MacBook Pro? 13.3 体验 “旧”时代的 One Pecie_笔记本电脑...

2020-11-11 13:19:377点赞18收藏18评论9月28日 - 11月12日&#xff0c;参与#双11购物攻略#征稿活动&#xff0c;赢取苹果全家桶8888元超级锦鲤大奖&#xff01;瓜分十万金币&#xff0c;值得买周边一次全攒齐&#xff01;品类、品牌、场景、价格&#xff0c;快来分享你的购物心…

杨振宁眼中的物理学之美

来源&#xff1a;EETOP本文是当代物理学大师杨振宁教授1997年1月17日在香港中华科学与社会协进会与香港中文大学主办的演讲会上的演讲词&#xff0c;讲题原为“科学工作有没有风格”。转载于香港《二十一世纪》杂志1997 年 4 月号&#xff0c;总第40期&#xff1b;也收入杨振宁…

wechat电脑版_【学术工具】如何快速、免费翻译英文材料?原创·WeChat公号:本硕博资讯...

★学术工具英文材料免费翻译如何快速、免费翻译英文材料&#xff1f;原创WeChat公号&#xff1a;本硕博资讯分享一些亲测可用的资源&#xff0c;仅用于学术交流。建议大家试着自己翻译&#xff0c;提升英语水平。版权声明&#xff1a;如有侵权问题请通过邮箱或者公众号后台私信…

20155234 2016-2017-2 《Java程序设计》第5周学习总结

20155234 2016-2017-2 《Java程序设计》第5周学习总结 教材学习内容总结 Java中所有错误都会被打包为对象&#xff0c;运用try、catch&#xff0c;可以在错误发生时显示友好的错误信息。运用try、catch&#xff0c;还可以在捕捉处理错误之后&#xff0c;尝试恢复程序正常执行流…