文字烟花特效,用JS代码示爱!程序员小姐姐用这个代码挽回了爱情~

开发 前端
我们在创建烟花粒子的时候,赋值了烟花绽放的原点x,y和圆形烟花的半径radius。在绘制烟花动效时,半径不断加大,烟花的动效就出来。

\[[397581]]

本文转载自微信公众号「大帅老猿」,作者大帅搞全栈。转载本文请联系大帅老猿公众号。

 前言

之前我出了一个如何在网页里使用原生JS开发放烟花效果的教程。

image.png

竟然有一个前端小阿姨问我,如果想要烟花放出来是文字的话怎么实现,她要给男朋友做一个。

好家伙,这狗粮洒一地呀

那狗粮不能我一个人吃,分享出来,大家一起吃。

此文配有视频教程,请点击查看原文

边吃边看,狗粮更香。

先改造一下烟花的源代码

之前烟花源码里的核心是,我们在创建烟花粒子的时候,赋值了烟花绽放的原点x,y和圆形烟花的半径radius。在绘制烟花动效时,半径不断加大,烟花的动效就出来。

  1. //篇幅限制,仅展现部分代码 
  2. function createFireworks(x, y) { 
  3.     var count = 100; 
  4.     for (var i = 0; i < count; i++) { 
  5.         var p = {}; 
  6.          
  7.         p.x = x; 
  8.         p.y = y; 
  9.         p.speed = (Math.random() * 5) + .4; 
  10.         p.radius = p.speed; 
  11.     } 
  12. function drawFireworks(){ 
  13.     for (var i = 0; i < particles.length; i++) { 
  14.         var p = particles[i]; 
  15.         var vx = Math.cos(p.radians) * p.radius; 
  16.         var vy = Math.sin(p.radians) * p.radius + 0.4; 
  17.  
  18.         p.x += vx; 
  19.         p.y += vy; 
  20.         p.radius *= 1 - p.speed / 100; 
  21.     } 

但要实现文字烟花,我们一开始就要把烟花最后的x,y坐标全部精确的计算出来。所以这个烟花的绘制,我们要更改一下逻辑。在createFireworks阶段,就计算出单个粒子的起点x,y和终点fx,fy。

代码修改后如下

  1. //篇幅限制,仅展现部分代码 
  2. function createFireworks(x, y){ 
  3.     var count = 100; 
  4.     for (var i = 0; i < count; i++) { 
  5.         var angle = 360 / count * i; 
  6.  
  7.         var p = {}; 
  8.         p.x = x; 
  9.         p.y = y; 
  10.         p.radians = angle * Math.PI / 180; 
  11.  
  12.         p.radius = Math.random()*81+50; 
  13.  
  14.         p.fx = x + Math.cos(radians) * p.radius; 
  15.         p.fy = y + Math.sin(radians) * p.radius; 
  16.     } 
  17. function drawFireworks() { 
  18.     for (var i = 0; i < particles.length; i++) { 
  19.         var p = particles[i]; 
  20.  
  21.         p.x += (p.fx - p.x)/10; 
  22.         p.y += (p.fy - p.y)/10-(p.alpha-1)*p.speed; 
  23.     } 

这样我们就完成了第一步改造,后续我们要把文字写在画布上,并且将其转换为点阵数组,也就是所有烟花粒子的终点坐标。

画布绘制文字

其实和之前那篇《使用Javascript制作BadApple字符画视频》的原理是一样的。通过canvas的APIgetImageData来获得画布指定区域内的全部点阵信息(rgba数组)。

将createFireworks方法改造如下

  1. function createFireworks(x,y,text=""){ 
  2.     if(text!=""){ 
  3.         //绘制文字 
  4.     }else
  5.         //原有的烟花代码 
  6.     } 

传递一个text参数,当此参数不为空时,我们进入文字烟花的绘制逻辑。

  1. var fontSize = 120; 
  2. var textHeight = fontSize; 
  3. context.font=fontSize+"px Verdana"
  4. context.fillStyle = "#ffffff";  
  5. context.fillText(text,0,textHeight); 

image.png

获取点阵数组

这样我们就能把字绘制在画布上了,接着我们使用getImageData来获得并裁剪点阵信息,因为我们只要一部分的点阵。

  1. var imgData = textctx.getImageData(0,0,textWidth,textHeight); 
  2.  
  3. for (var h = 0; h < textHeight; h+=gap) { 
  4.     for(var w = 0; w < textWidth; w+=gap){ 
  5.             var position = (textWidth * h + w) * 4; 
  6.             var r = imgData.data[position], g = imgData.data[position + 1], b = imgData.data[position + 2], a = imgData.data[position + 3]; 
  7.     } 

这样我们就拿到了画布里文字绘制区域的全部点阵数据,数据的格式为

  1. [r,g,b,a,r,g,b,a,r,g,b,a] 

我们通过一个gap值来跳跃间隔裁剪数据。由于画布是黑色,所以r,g,b都为0的点阵我们就不绘制了,现在将间隔的点阵信息再次绘制到画布中。

  1. var fx = x + w - textWidth/2; 
  2. var fy = y + h - textHeight/2; 
  3.  
  4. context.fillStyle = "#ffffff"
  5. context.fillRect(fx,fy,1,1); 

我们就会看见~

image.png

image.png

太棒了,这就是我们最终需要的文字烟花粒子的终点信息呀!

现在我们遍历全部的点阵,并创建烟花粒子吧!

  1. for (var h = 0; h < textHeight; h+=gap) { 
  2.     for(var w = 0; w < textWidth; w+=gap){ 
  3.             var position = (textWidth * h + w) * 4; 
  4.             var r = imgData.data[position], g = imgData.data[position + 1], b = imgData.data[position + 2]; 
  5.  
  6.             if(r+g+b==0)continue
  7.  
  8.             var p = {}; 
  9.             p.x = x; 
  10.             p.y = y; 
  11.             p.fx = x + w - textWidth/2; 
  12.             p.fy = y + h - textHeight/2; 
  13.  
  14.             p.size = Math.floor(Math.random()*2)+1; 
  15.             p.speed = 1; 
  16.  
  17.             setupColors(p); 
  18.  
  19.             particles.push(p); 
  20.     } 

文字烟花来了

至此,文字烟花效果,我们就实现了!!!

2021-05-03 21_27_34.gif

用它示爱!

  1. createFireworks(x, y,["杨幂","我爱你","永远"][Math.floor(Math.random()*3)]); 

2021-05-03 22_26_55.gif

原文链接:https://mp.weixin.qq.com/s/nyVyQybGvaNTir8CMu1KYg

 

责任编辑:武晓燕 来源: 大帅老猿
相关推荐

2017-11-03 09:10:48

2019-10-21 10:01:58

Python素描技术

2021-05-12 11:08:33

PPT代码工具

2017-11-06 09:10:56

程序员数据行业

2012-08-29 15:49:50

2022-04-26 10:25:16

程序员代码

2013-06-28 13:28:09

2017-11-08 17:15:52

程序员代码编程

2021-04-14 14:28:14

Python点攒抖音

2010-08-11 09:51:28

Flex代码

2017-03-13 09:07:05

测定代码基因

2012-02-02 15:14:29

Node.js

2015-10-23 10:53:39

代码航天程序员

2023-03-08 09:43:42

2020-05-20 09:47:57

程序员代码网络

2020-05-26 10:20:56

Python开发工具

2009-12-03 16:50:58

Visual Basi

2015-06-17 14:24:48

优秀程序员整洁代码

2013-04-19 09:53:20

2009-01-07 09:52:37

程序员爱情工作
点赞
收藏

51CTO技术栈公众号