建站
咨詢
售后
建站咨詢
新聞中心
\[[397581]]
本文轉(zhuǎn)載自微信公眾號「大帥老猿」，作者大帥搞全棧。轉(zhuǎn)載本文請聯(lián)系大帥老猿公眾號。
創(chuàng)新互聯(lián)公司專注于蔡甸網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供蔡甸營銷型網(wǎng)站建設(shè)，蔡甸網(wǎng)站制作、蔡甸網(wǎng)頁設(shè)計、蔡甸網(wǎng)站官網(wǎng)定制、微信小程序開發(fā)服務(wù)，打造蔡甸網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供蔡甸網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。
前言
之前我出了一個如何在網(wǎng)頁里使用原生JS開發(fā)放煙花效果的教程。
image.png
竟然有一個前端小阿姨問我，如果想要煙花放出來是文字的話怎么實現(xiàn)，她要給男朋友做一個。
好家伙，這狗糧灑一地呀
那狗糧不能我一個人吃，分享出來，大家一起吃。
此文配有視頻教程，請點擊查看原文
邊吃邊看，狗糧更香。
先改造一下煙花的源代碼
之前煙花源碼里的核心是，我們在創(chuàng)建煙花粒子的時候，賦值了煙花綻放的原點x,y和圓形煙花的半徑radius。在繪制煙花動效時，半徑不斷加大，煙花的動效就出來。
- //篇幅限制，僅展現(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;
- }
- }
但要實現(xiàn)文字煙花，我們一開始就要把煙花最后的x,y坐標全部精確的計算出來。所以這個煙花的繪制，我們要更改一下邏輯。在createFireworks階段，就計算出單個粒子的起點x,y和終點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ù)我們要把文字寫在畫布上，并且將其轉(zhuǎn)換為點陣數(shù)組，也就是所有煙花粒子的終點坐標。
畫布繪制文字
其實和之前那篇《使用Javascript制作BadApple字符畫視頻》的原理是一樣的。通過canvas的APIgetImageData來獲得畫布指定區(qū)域內(nèi)的全部點陣信息(rgba數(shù)組)。
將createFireworks方法改造如下
- function createFireworks(x,y,text=""){
- if(text!=""){
- //繪制文字
- }else{
- //原有的煙花代碼
- }
- }
傳遞一個text參數(shù)，當此參數(shù)不為空時，我們進入文字煙花的繪制邏輯。
- var fontSize = 120;
- var textHeight = fontSize;
- context.font=fontSize+"px Verdana";
- context.fillStyle = "#ffffff";
- context.fillText(text,0,textHeight);
image.png
獲取點陣數(shù)組
這樣我們就能把字繪制在畫布上了，接著我們使用getImageData來獲得并裁剪點陣信息，因為我們只要一部分的點陣。
- 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];
- }
- }
這樣我們就拿到了畫布里文字繪制區(qū)域的全部點陣數(shù)據(jù)，數(shù)據(jù)的格式為
- [r,g,b,a,r,g,b,a,r,g,b,a]
我們通過一個gap值來跳躍間隔裁剪數(shù)據(jù)。由于畫布是黑色，所以r,g,b都為0的點陣我們就不繪制了，現(xiàn)在將間隔的點陣信息再次繪制到畫布中。
- var fx = x + w - textWidth/2;
- var fy = y + h - textHeight/2;
- context.fillStyle = "#ffffff";
- context.fillRect(fx,fy,1,1);
我們就會看見~
image.png
image.png
太棒了，這就是我們最終需要的文字煙花粒子的終點信息呀!
現(xià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);
- }
- }
文字煙花來了
至此，文字煙花效果，我們就實現(xiàn)了!!!
2021-05-03 21_27_34.gif
用它示愛!
- createFireworks(x, y,["楊冪","我愛你","永遠"][Math.floor(Math.random()*3)]);
2021-05-03 22_26_55.gif
分享標題：文字煙花特效，用JS代碼示愛！程序員小姐姐用這個代碼挽回了愛情~
鏈接URL：http://m.5511xx.com/article/djjddpi.html
