\[[397581]]

本文轉(zhuǎn)載自微信公眾號(hào)「大帥老猿」，作者大帥搞全棧。轉(zhuǎn)載本文請(qǐng)聯(lián)系大帥老猿公眾號(hào)。

創(chuàng)新互聯(lián)公司專(zhuān)注于蔡甸網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供蔡甸營(yíng)銷(xiāo)型網(wǎng)站建設(shè)，蔡甸網(wǎng)站制作、蔡甸網(wǎng)頁(yè)設(shè)計(jì)、蔡甸網(wǎng)站官網(wǎng)定制、微信小程序開(kāi)發(fā)服務(wù)，打造蔡甸網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供蔡甸網(wǎng)站排名全網(wǎng)營(yíng)銷(xiāo)落地服務(wù)。

 前言

之前我出了一個(gè)如何在網(wǎng)頁(yè)里使用原生JS開(kāi)發(fā)放煙花效果的教程。

image.png

竟然有一個(gè)前端小阿姨問(wèn)我，如果想要煙花放出來(lái)是文字的話(huà)怎么實(shí)現(xiàn)，她要給男朋友做一個(gè)。

好家伙，這狗糧灑一地呀

那狗糧不能我一個(gè)人吃，分享出來(lái)，大家一起吃。

此文配有視頻教程，請(qǐng)點(diǎn)擊查看原文

邊吃邊看，狗糧更香。

先改造一下煙花的源代碼

之前煙花源碼里的核心是，我們?cè)趧?chuàng)建煙花粒子的時(shí)候，賦值了煙花綻放的原點(diǎn)x,y和圓形煙花的半徑radius。在繪制煙花動(dòng)效時(shí)，半徑不斷加大，煙花的動(dòng)效就出來(lái)。

 
 
 
 
  
  
  
  
//篇幅限制，僅展現(xiàn)部分代碼 
  
  
  
  
function createFireworks(x, y) { 
  
  
  
  
    var count = 100; 
  
  
  
  
    for (var i = 0; i < count; i++) { 
  
  
  
  
        var p = {}; 
  
  
  
  
         
  
  
  
  
        p.x = x; 
  
  
  
  
        p.y = y; 
  
  
  
  
        p.speed = (Math.random() * 5) + .4; 
  
  
  
  
        p.radius = p.speed; 
  
  
  
  
    } 
  
  
  
  
} 
  
  
  
  
function drawFireworks(){ 
  
  
  
  
    for (var i = 0; i < particles.length; i++) { 
  
  
  
  
        var p = particles[i]; 
  
  
  
  
        var vx = Math.cos(p.radians) * p.radius; 
  
  
  
  
        var vy = Math.sin(p.radians) * p.radius + 0.4; 
  
  
  
  
 
  
  
  
  
        p.x += vx; 
  
  
  
  
        p.y += vy; 
  
  
  
  
        p.radius *= 1 - p.speed / 100; 
  
  
  
  
    } 
  
  
  
  
} 
 
 
 

但要實(shí)現(xiàn)文字煙花，我們一開(kāi)始就要把煙花最后的x,y坐標(biāo)全部精確的計(jì)算出來(lái)。所以這個(gè)煙花的繪制，我們要更改一下邏輯。在createFireworks階段，就計(jì)算出單個(gè)粒子的起點(diǎn)x,y和終點(diǎn)fx,fy。

代碼修改后如下

 
 
 
 
  
  
  
  
//篇幅限制，僅展現(xiàn)部分代碼 
  
  
  
  
function createFireworks(x, y){ 
  
  
  
  
    var count = 100; 
  
  
  
  
    for (var i = 0; i < count; i++) { 
  
  
  
  
        var angle = 360 / count * i; 
  
  
  
  
 
  
  
  
  
        var p = {}; 
  
  
  
  
        p.x = x; 
  
  
  
  
        p.y = y; 
  
  
  
  
        p.radians = angle * Math.PI / 180; 
  
  
  
  
 
  
  
  
  
        p.radius = Math.random()*81+50; 
  
  
  
  
 
  
  
  
  
        p.fx = x + Math.cos(radians) * p.radius; 
  
  
  
  
        p.fy = y + Math.sin(radians) * p.radius; 
  
  
  
  
    } 
  
  
  
  
} 
  
  
  
  
function drawFireworks() { 
  
  
  
  
    for (var i = 0; i < particles.length; i++) { 
  
  
  
  
        var p = particles[i]; 
  
  
  
  
 
  
  
  
  
        p.x += (p.fx - p.x)/10; 
  
  
  
  
        p.y += (p.fy - p.y)/10-(p.alpha-1)*p.speed; 
  
  
  
  
    } 
  
  
  
  
} 
 
 
 

這樣我們就完成了第一步改造，后續(xù)我們要把文字寫(xiě)在畫(huà)布上，并且將其轉(zhuǎn)換為點(diǎn)陣數(shù)組，也就是所有煙花粒子的終點(diǎn)坐標(biāo)。

畫(huà)布繪制文字

其實(shí)和之前那篇《使用Javascript制作BadApple字符畫(huà)視頻》的原理是一樣的。通過(guò)canvas的APIgetImageData來(lái)獲得畫(huà)布指定區(qū)域內(nèi)的全部點(diǎn)陣信息(rgba數(shù)組)。

將createFireworks方法改造如下

 
 
 
 
  
  
  
  
function createFireworks(x,y,text=""){ 
  
  
  
  
    if(text!=""){ 
  
  
  
  
        //繪制文字 
  
  
  
  
    }else{ 
  
  
  
  
        //原有的煙花代碼 
  
  
  
  
    } 
  
  
  
  
} 
 
 
 

傳遞一個(gè)text參數(shù)，當(dāng)此參數(shù)不為空時(shí)，我們進(jìn)入文字煙花的繪制邏輯。

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

image.png

獲取點(diǎn)陣數(shù)組

這樣我們就能把字繪制在畫(huà)布上了，接著我們使用getImageData來(lái)獲得并裁剪點(diǎn)陣信息，因?yàn)槲覀冎灰徊糠值狞c(diǎn)陣。

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

這樣我們就拿到了畫(huà)布里文字繪制區(qū)域的全部點(diǎn)陣數(shù)據(jù)，數(shù)據(jù)的格式為

 
 
 
 
  
  
  
  
[r,g,b,a,r,g,b,a,r,g,b,a] 
 
 
 

我們通過(guò)一個(gè)gap值來(lái)跳躍間隔裁剪數(shù)據(jù)。由于畫(huà)布是黑色，所以r,g,b都為0的點(diǎn)陣我們就不繪制了，現(xiàn)在將間隔的點(diǎn)陣信息再次繪制到畫(huà)布中。

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

我們就會(huì)看見(jiàn)~

image.png

image.png

太棒了，這就是我們最終需要的文字煙花粒子的終點(diǎn)信息呀!

現(xiàn)在我們遍歷全部的點(diǎn)陣，并創(chuàng)建煙花粒子吧!

 
 
 
 
  
  
  
  
for (var h = 0; h < textHeight; h+=gap) { 
  
  
  
  
    for(var w = 0; w < textWidth; w+=gap){ 
  
  
  
  
            var position = (textWidth * h + w) * 4; 
  
  
  
  
            var r = imgData.data[position], g = imgData.data[position + 1], b = imgData.data[position + 2]; 
  
  
  
  
 
  
  
  
  
            if(r+g+b==0)continue; 
  
  
  
  
 
  
  
  
  
            var p = {}; 
  
  
  
  
            p.x = x; 
  
  
  
  
            p.y = y; 
  
  
  
  
            p.fx = x + w - textWidth/2; 
  
  
  
  
            p.fy = y + h - textHeight/2; 
  
  
  
  
 
  
  
  
  
            p.size = Math.floor(Math.random()*2)+1; 
  
  
  
  
            p.speed = 1; 
  
  
  
  
 
  
  
  
  
            setupColors(p); 
  
  
  
  
 
  
  
  
  
            particles.push(p); 
  
  
  
  
    } 
  
  
  
  
} 
 
 
 

文字煙花來(lái)了

至此，文字煙花效果，我們就實(shí)現(xiàn)了!!!

2021-05-03 21_27_34.gif

用它示愛(ài)!

 
 
 
 
  
  
  
  
createFireworks(x, y,["楊冪","我愛(ài)你","永遠(yuǎn)"][Math.floor(Math.random()*3)]); 
 
 
 

2021-05-03 22_26_55.gif

分享標(biāo)題：文字煙花特效，用JS代碼示愛(ài)！程序員小姐姐用這個(gè)代碼挽回了愛(ài)情~
文章路徑：http://uogjgqi.cn/article/djjddpi.html