丹東做網(wǎng)站的吉林seo管理平臺(tái)
目錄
前言
一、煙花秀效果功能分解
1、功能分解
2、界面分解?
?二、HTML功能實(shí)現(xiàn)
1、html界面設(shè)計(jì)
2、背景音樂(lè)和燃放觸發(fā)
3、燃放控制
4、對(duì)聯(lián)展示
5、腳本引用即文本展示
三、腳本調(diào)用及實(shí)現(xiàn)
1、煙花燃放
2、燃放響應(yīng)
3、煙花canvas創(chuàng)建?
4、燃放聲音控制
?5、實(shí)際效果
?總結(jié)
前言
????????今天是2024年2月15日，農(nóng)歷正月初六。正月初六，又稱為“馬日”，是中國(guó)傳統(tǒng)節(jié)日春節(jié)期間的一個(gè)重要習(xí)俗日。這一天，人們有送窮、啟市、外出游玩、吃驢打滾等習(xí)俗。大年初六，你們那都有什么傳統(tǒng)習(xí)俗呢？我們來(lái)看看全國(guó)都有什么習(xí)俗吧。
- ?送窮。正月初六是送窮神的日子，人們會(huì)進(jìn)行大掃除，清理家中的垃圾和廢物，以示送走貧窮和厄運(yùn)。在送窮的過(guò)程中，人們還會(huì)貼上紅色的對(duì)聯(lián)和福字，寓意著迎接好運(yùn)和富貴。
- ?啟市。初六也是生意人“啟市”的好日子，做生意的生意人有著初六開市的習(xí)俗，初六這一天會(huì)放鞭炮開張，有些講究的商戶還會(huì)在門上貼上，開市大吉，萬(wàn)事亨通的對(duì)聯(lián)，寓意著今年的生意能夠紅紅火火，大吉大利，財(cái)源滾滾來(lái)。
- ?外出游玩。正月初六有外出游玩的習(xí)俗，而且特別喜歡去人多熱鬧的地方。大家外出會(huì)走一個(gè)圓圈的形狀，意味著新的一年生活圓滿和幸福。
- ? 吃驢打滾。正月初六吃驢打滾也是為了取一個(gè)好彩頭，在民間有著吃驢打滾，財(cái)源滾滾來(lái)的美好寓意。
- ?擺吉祥果。家家戶戶都會(huì)擺上寓意吉祥的水果，以祈求自己新的一年，順順利利，大吉大利。
????????上面都是一些傳統(tǒng)節(jié)日中的重要習(xí)俗，各位小伙伴可以在評(píng)論區(qū)給我們分享一些你們當(dāng)?shù)赜腥さ某趿蛘哌^(guò)年習(xí)俗吧。大年初六，相信很多IT的小伙伴已經(jīng)踏上了返程的道路，真誠(chéng)祝愿大家在龍年順順利利，所愿皆所成。作為一名IT從業(yè)者，也想用技術(shù)來(lái)與大家一起度過(guò)這個(gè)愉快，寓意順利的初六。
????????本文將重點(diǎn)講解使用HTML5實(shí)現(xiàn)一款動(dòng)態(tài)的煙花秀，不僅有美麗絢爛的煙花，同時(shí)在煙花燃放時(shí)，還有預(yù)約的音樂(lè)，加上熱情動(dòng)態(tài)的文字燃放效果，最后將給出實(shí)戰(zhàn)代碼源碼，感興趣的朋友可以參考實(shí)現(xiàn)。
一、煙花秀效果功能分解
????????煙花秀的效果包含五彩繽紛的煙花展示，主要采用canvas技術(shù)，在燃放的過(guò)程中，需要模擬煙花爆炸的聲音，同時(shí)還有背景音樂(lè)，系統(tǒng)界面可以展示溫馨的提示，在展示頁(yè)面兩側(cè)需要展示春聯(lián)。下面從功能和界面兩個(gè)方面對(duì)煙花秀進(jìn)行分解。
1、功能分解
2、界面分解?
????????煙花秀的界面結(jié)構(gòu)圖如下所示，整體采用對(duì)聯(lián)加煙花效果背景音樂(lè)為主。
?二、HTML功能實(shí)現(xiàn)
????????本節(jié)將對(duì)煙花秀效果的實(shí)現(xiàn)進(jìn)行詳細(xì)的說(shuō)明。主要包含主要展示頁(yè)面的可視化展示創(chuàng)建，相關(guān)腳本功能的編寫。本文采用的示例代碼是在開源的框架上修改，同時(shí)修改了一些展示的錯(cuò)誤以及修復(fù)了文字動(dòng)態(tài)煙花播放效果，音效控制等功能。文末會(huì)分享其開源地址，下圖是這個(gè)下載下來(lái)的示例項(xiàng)目的js源碼，可以看到，其是采用jquery等傳統(tǒng)es5開發(fā)模式進(jìn)行開發(fā)的。
1、html界面設(shè)計(jì)
????????首先，需要?jiǎng)?chuàng)建一個(gè)html頁(yè)面，定義最基礎(chǔ)的網(wǎng)頁(yè)開發(fā)框架。html的基礎(chǔ)知識(shí)比較簡(jiǎn)單，這里不再進(jìn)行贅述。關(guān)鍵源代碼如下：
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>2024龍年快樂(lè)</title><meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"><meta name="mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="theme-color" content="#000000"><link rel="shortcut icon" type="image/png"href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/firework-burst-icon-v2.png"><link rel="icon" type="image/png"href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/firework-burst-icon-v2.png"><link rel="apple-touch-icon-precomposed"href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/firework-burst-icon-v2.png"><meta name="msapplication-TileColor" content="#000000"><meta name="msapplication-TileImage"content="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329180/firework-burst-icon-v2.png"><link href="static/css/css.css" rel="stylesheet"><link rel="stylesheet" href="static/css/reset.min.css"><link rel="stylesheet" href="static/css/style.css"><script src="static/js/jquery.min.js" type="text/javascript"></script></head><body></body></html>2、背景音樂(lè)和燃放觸發(fā)
????????煙花秀中除了煙花燃放本身的爆炸聲音，同時(shí)為了烘托和渲染節(jié)日的氛圍，也增加背景音樂(lè)的播功能，更加沉浸式的欣賞煙花秀效果，燃放觸發(fā)是在界面上點(diǎn)擊后即實(shí)現(xiàn)煙花的燃放。定義背景音樂(lè)和燃放觸發(fā)的關(guān)鍵代碼如下：
<script src="static/js/jump.js"></script><img id="music_ico" onclick="" alt="" style=" display: inline; float: right; "><audio id="audioDom" src="https://sf6-cdn-tos.douyinstatic.com/obj/ies-music/7170534431801838367.mp3"preload="auto" loop="loop"></audio><div id="yhBtn"style="position:fixed;top:0;left:0;width:100%;height:100%;z-index:999;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#fff ; font-size:15px "><p>💥點(diǎn)爆</p><img style="width:64px;margin-bottom:24px "src="https://p3-sign.toutiaoimg.com/tos-cn-i-qvj2lq49k0/aee169ba675b45da9c46178a7dff7141~tplv-tt-shrink:640:0.image?traceid=2023031217004633E93ACFE2CECD4E7B70&x-expires=2147483647&x-signature=s7SeUD%2FlMsfTpWPP7Tl47sPaT%2BQ%3D"></div>????????需要注意的是，為了節(jié)約存儲(chǔ)空間，這里的背景音樂(lè)使用在線的mp3音樂(lè)，如果需要離線化展示，可以將mp3進(jìn)行離線保存即可。
3、燃放控制
????????燃放控制可以支持對(duì)煙花秀的播放狀態(tài)進(jìn)行控制，比如開啟和暫停。同時(shí)控制煙花的播放聲效等。還支持設(shè)置煙花的樣式、大小、時(shí)間、密度等（這里有一些小問(wèn)題，需要使用的朋友需要自己去實(shí)現(xiàn)）。關(guān)鍵代碼如下：
<div style="height: 100; width: 100; position: absolute; visibility: hidden;"><svg xmlns="http://www.w3.org/2000/svg"><symbol id="icon-play" viewbox="0 0 24 24"><path d="M8 5v14l11-7z"></path></symbol><symbol id="icon-pause" viewbox="0 0 24 24"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"></path></symbol><symbol id="icon-close" viewbox="0 0 24 24"><pathd="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path></symbol><symbol id="icon-settings" viewbox="0 0 24 24"><pathd="M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z"></path></symbol><symbol id="icon-sound-on" viewbox="0 0 24 24"><pathd="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"></path></symbol><symbol id="icon-sound-off" viewbox="0 0 24 24"><pathd="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"></path></symbol></svg></div><div class="container"><div class="loading-init"><div class="loading-init__header"></div><div class="loading-init__status"></div></div><div class="stage-container remove"><div class="page_two hide"><div class="type_words" id="contents"></div></div><div class="canvas-container"><canvas id="trails-canvas"></canvas><canvas id="main-canvas"></canvas></div><div class="controls hide"><div class="btn pause-btn"><svg fill="white" width="24" height="24"><use href="#icon-pause" xlink:href="#icon-pause"></use></svg></div><div class="btn sound-btn"><svg fill="white" width="24" height="24"><use href="#icon-sound-off" xlink:href="#icon-sound-off"></use></svg></div><div class="btn settings-btn"><svg fill="white" width="24" height="24"><use href="#icon-settings" xlink:href="#icon-settings"></use></svg></div></div><div class="menu hide"><div class="menu__inner-wrap"><div class="btn btn--bright close-menu-btn"><svg fill="white" width="24" height="24"><use href="#icon-close" xlink:href="#icon-close"></use></svg></div><div class="menu__header">設(shè)置</div><form><div class="form-option form-option--select"><label class="shell-type-label">煙花類型</label><select class="shell-type"></select></div><div class="form-option form-option--select"><label class="shell-size-label">煙花大小</label><select class="shell-size"></select></div><div class="form-option form-option--select"><label class="quality-ui-label">畫質(zhì)</label><select class="quality-ui"></select></div><div class="form-option form-option--select"><label class="sky-lighting-label">天空照明</label><select class="sky-lighting"></select></div><div class="form-option form-option--select"><label class="scaleFactor-label">規(guī)模</label><select class="scaleFactor"></select></div><div class="form-option form-option--checkbox"><label class="auto-launch-label">自動(dòng)發(fā)射</label><input class="auto-launch" type="checkbox"></div><div class="form-option form-option--checkbox form-option--finale-mode"><label class="finale-mode-label">結(jié)局模式</label><input class="finale-mode" type="checkbox"></div><div class="form-option form-option--checkbox"><label class="hide-controls-label">隱藏控制器</label><input class="hide-controls" type="checkbox"></div><div class="form-option form-option--checkbox form-option--fullscreen"><label class="fullscreen-label">全屏</label><input class="fullscreen" type="checkbox"></div><div class="form-option form-option--checkbox"><label class="long-exposure-label">打開快門</label><input class="long-exposure" type="checkbox"></div></form></div></div></div><div class="help-modal"><div class="help-modal__overlay"></div><div class="help-modal__dialog"><div class="help-modal__header"></div><div class="help-modal__body"></div><button type="button" class="help-modal__close-btn">關(guān)閉</button></div></div></div>4、對(duì)聯(lián)展示
為了在展示頁(yè)面中烘托節(jié)日的氣氛，這里在展示頁(yè)面左右兩邊增加對(duì)聯(lián)的展示。這里采用div布局，字體采用楷體。對(duì)聯(lián)內(nèi)容如下：
鯤鵬展翅華夏騰飛
龍鳳呈祥陽(yáng)春錦繡代碼實(shí)現(xiàn)如下：
<div style="width:60px;position:fixed;left:0px;top:30%;background-color:red;text-align:center;font-family:楷體;font-size:36px;"><font color="black" >鯤<br/>鵬<br/>展<br/>翅<br/>華<br/>夏<br/>騰<br/>飛</font></div><div style="width:60px;position:fixed;right:0px;top:30%;background-color:red;text-align:center;font-family:楷體;font-size:36px;"><font color="black">龍<br/>鳳<br/>呈<br/>祥<br/>陽(yáng)<br/>春<br/>錦<br/>繡</font></div>
5、腳本引用即文本展示
????????在html頁(yè)面引用相應(yīng)的javascript腳本資源，在這里增加相應(yīng)的邏輯調(diào)用。同時(shí)，在這里會(huì)將頁(yè)面展示動(dòng)態(tài)文字，將文字作為煙花的實(shí)例進(jìn)行燃放，為了在移動(dòng)端實(shí)現(xiàn)這種效果，同時(shí)支持分辨率適配。詳細(xì)代碼設(shè)置如下：
<script>window.myWord = "?新年快樂(lè)(*^▽^*) <br > 新的一年， 新的開始， 要繼續(xù)努力哦。<br/>祝朋友們學(xué)習(xí)進(jìn)步，開心快樂(lè)";window.words = ["", "2024", "新年快樂(lè)", "萬(wàn)事如意", "心想事成", "龍年大吉","龍年行大運(yùn)","祥瑞照門庭"];</script><script src="static/js/jquery.min.js" type="text/javascript"></script><script src='static/js/fscreen@1.0.1.js'></script> <script src='static/js/stage@0.1.4.js'></script><script src='static/js/mymath.js'></script><script src="static/js/script.js"></script><script src="static/js/main.js"></script><script src="static/js/game.js"></script><script src="static/js/game2.js?v=1.0.0"></script><style>@media only screen and (max-width: 768px) {.canvas-container {/* 迪士尼 *//* background-image: url("https://p3-search.byteimg.com/obj/pgc-image/09b7e7820ba94e76b10a39802b901cab"); */background-image: url(./static/img/20231229155918.jpg);/* 放煙花 */background-size: cover;background-position: center;}}@media only screen and (min-width: 768px) {.canvas-container {/* 天空月亮 */background-image: url(./static/img/e83f1c98e4ff999d33fa02d95d083f5d.png);background-size: cover;background-position: center;}}</style>三、腳本調(diào)用及實(shí)現(xiàn)
????????html框架僅僅是頁(yè)面的展示外殼，要讓煙花秀真正的動(dòng)態(tài)燃放，必然少不了javascript的支持。這里將重點(diǎn)介紹腳本的調(diào)用。讓我們來(lái)看看煙花秀的實(shí)現(xiàn)過(guò)程。
1、煙花燃放
????????在頁(yè)面中我們定義了一個(gè)煙花的圖片，在頁(yè)面中點(diǎn)擊任意位置即可完成煙花的點(diǎn)燃。同時(shí)完成相關(guān)事件的觸發(fā)。事件源碼在main.js中：
function musicPlay(isPlay) {var media = document.querySelector('#audioDom');if (isPlay && media.paused) {media.play();}if (!isPlay && !media.paused) {media.pause();}
}
function musicInBrowserHandler() {setTimeout(function () {musicPlay(true)}, 0)
}
document.body.addEventListener('touchstart', musicInBrowserHandler);
$('#yhBtn').click(e => {$('#yhBtn').hide()setTimeout(function () {startF();}, 3000)setTimeout(() => {start()fireworks();}, 5000) // 這里的5000 是5s指煙花延時(shí)時(shí)間setTimeout(() => {function audioAutoPlay() {var audio = document.getElementById('audioDom');audio.play();}audioAutoPlay();}, 5000) // 這里的5000 是5s指音樂(lè)延時(shí)時(shí)間console.log(updateConfig({ autoLaunch: true }));
})
function fireworks() {$('.page_one').addClass('hide');$('.page_two').removeClass('hide');/*$('.page_two').fireworks({sound: false,opacity: 1,width: '100%',height: '100%'});*/
}
function start() {let str =window.myWord; let str_ = ''let i = 0let content = document.getElementById('contents')let timer = setInterval(() => {if (str_.length < str.length) {str_ += str[i++]content.innerHTML = '<p>' + str_ + '<span class="xx" style="opacity: 1; color: red;">?</span></p>' //打印時(shí)加光標(biāo)} else {clearInterval(timer)content.innerHTML = '<p>' + str_ + '</p>'}}, 100)
}
2、燃放響應(yīng)
?????????在這里觸發(fā)了startF()函數(shù)，在game2.js中查看startF()具體實(shí)現(xiàn)：
3、煙花canvas創(chuàng)建?
????????在開始燃放函數(shù)中，煙花是基于canvas進(jìn)行展示的。下面來(lái)具體看看煙花的實(shí)現(xiàn)：
4、燃放聲音控制
?????????為了讓煙花秀更加逼真，需要在燃放時(shí)進(jìn)行爆炸的模擬。因此首先要進(jìn)行聲源的定義，然后再進(jìn)行播放。
?5、實(shí)際效果
基于html5的動(dòng)態(tài)煙花秀
?總結(jié)
????????以上就是本文的主要內(nèi)容，本文將重點(diǎn)講解使用HTML5實(shí)現(xiàn)一款動(dòng)態(tài)的煙花秀，不僅有美麗絢爛的煙花，同時(shí)在煙花燃放時(shí)，還有預(yù)約的音樂(lè)，加上熱情動(dòng)態(tài)的文字燃放效果。行文倉(cāng)促，定有不當(dāng)之處，還請(qǐng)各位朋友批評(píng)。
原始實(shí)例地址：html5煙花秀