HTML5夢幻之旅――炫麗的流星雨效果實現過程

2024-09-05 07:20:27

字體：大中小

來源：轉載

供稿：網友

徐家破鏡昏如霧。半面人間露。等閑相約是看燈。誰料人間天上、似流星。朱門簾影深深雨。憔悴新人舞。天涯海角賞新晴。惟有橋邊賣鏡、是閑行。
——宋·劉辰翁·《虞美人》

流星出現的時候，人們都喜歡對著它們許愿，因為傳說對著流星許下愿望后，愿望就能實現。不過流星很少見，至少我沒有見到過，因此從來沒有對著它許愿。最近出于興趣，制作一個拖尾效果，后來想到可以通過拖尾效果來實現一下流星雨的效果。因此今天就來實現一下，也好讓我等沒有看到過流星的童鞋長長見識。

先發幾個截圖吧：

測試連接：http://www.cnblogs.com/yorhom/articles/3237944.html
一，準備工作
本次開發需要用到開源引擎lufylegend.js，引擎的下載地址&詳細信息如下
引擎官方網站：
http://lufylegend.com/lufylegend
引擎API網站：
http://lufylegend.com/lufylegend/api
二，拖尾效果
實現流星雨，要用到拖尾效果，但lufylegend中沒有添加拖尾的功能，所以只有自己寫了，其實實現起來也不難，就是lufy太懶了，沒有封裝而已（愿lufy不要看到這句話啊……）。今天我就幫他老人家來實現一下這個效果。
拖尾這個效果在游戲中很常見，比如人物移動時的幻影，子彈等。因此我們把它封裝為一個Smearing類，這個類主要負責實現拖尾效果。代碼如下：

復制代碼

上一篇：使用HTML5拍照示例代碼

下一篇：5個你不知道的HTML5的接口介紹