整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
canvas 兩種拖尾效果實現煙花：視覺盛宴的代碼藝術
**引言**
在Web前端開發領域，HTML5 Canvas以其強大的圖形渲染能力，為開發者提供了無限可能。本文將聚焦于如何利用Canvas API創建出絢麗奪目的煙花特效，并重點解析兩種不同風格的煙花拖尾效果實現方式。通過詳細的代碼示例和解析，你將學會如何打造一場屬于自己的線上煙火晚會，讓觀眾沉浸在美輪美奐的視覺盛宴之中。
## **一、基礎概念與準備工作**
### **1. 創建Canvas元素**
首先，在HTML中設置一個`canvas`元素作為畫布：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas煙花特效</title>
<style>
canvas {
display: block;
margin: auto;
background-color: #000;
}
</style>
</head>
<body>
<canvas id="fireworksCanvas" width="800" height="600"></canvas>
<script src="fireworks.js"></script>
</body>
</html>
```
### **2. 獲取Canvas上下文**
在JavaScript文件（如上例中的`fireworks.js`）中獲取Canvas上下文：
```javascript
const canvas = document.getElementById('fireworksCanvas');
const ctx = canvas.getContext('2d');
```
## **二、基于點陣的煙花拖尾效果**
### **原理**
本方法采用點陣形式模擬煙花爆炸后的粒子軌跡，每個粒子隨著時間推移逐漸消散或淡出。
```javascript
class Particle {
constructor(x, y, speed, color) {
this.x = x;
this.y = y;
this.speed = speed;
this.color = color;
// 其他屬性...
}
update() {
// 更新粒子位置
this.y -= this.speed;
// 淡出處理...
}
draw(ctx) {
ctx.fillStyle = this.color;
ctx.beginPath();
ctx.arc(this.x, this.y, 1, 0, Math.PI * 2);
ctx.fill();
}
}
// 煙花類，包含多個粒子對象
class FireworkWithDotsTrail {
// 初始化、更新、繪制方法...
}
```
### **實現過程**
1. 在煙花發射時生成一組隨機位置、速度和顏色的粒子。
2. 每幀更新所有粒子的位置和透明度，并繪制到畫布上。
3. 當粒子超出屏幕或者透明度達到一定程度時，重新生成新的粒子以維持煙花的持續效果。
## **三、基于線條追蹤的煙花拖尾效果**
### **原理**
此方法通過連續記錄煙花移動路徑上的關鍵點，并連接這些點形成一條平滑的線條來展現拖尾效果。
```javascript
class FireworkWithLineTrail {
constructor(startX, startY, endX, endY, color) {
this.startX = startX;
this.startY = startY;
this.endX = endX;
this.endY = endY;
this.color = color;
this.trailPoints = [[startX, startY]];
}
update(position) {
this.endX = position.x;
this.endY = position.y;
this.trailPoints.push([this.endX, this.endY]);
// 清理過舊的軌跡點...
}
draw(ctx) {
ctx.beginPath();
ctx.strokeStyle = this.color;
for (let i = 0; i < this.trailPoints.length - 1; i++) {
const [x1, y1] = this.trailPoints[i];
const [x2, y2] = this.trailPoints[i + 1];
ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2);
}
ctx.stroke();
}
}
```
### **實現過程**
1. 初始化煙花發射位置和目標方向，創建一個包含起點坐標的軌跡點數組。
2. 每次煙花移動時，添加新的坐標點至軌跡點數組，并清理超出指定數量的舊軌跡點。
3. 繪制時，遍歷軌跡點數組并連線，形成拖尾效果。
## **四、完整示例及動畫循環**
為了實現動態效果，我們需要使用`requestAnimationFrame`進行動畫循環：
```javascript
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
fireworks.forEach((firework) => firework.updateAndDraw());
requestAnimationFrame(animate);
}
// 初始化若干煙花實例并開始動畫循環
const fireworks = [/*...*/];
animate();
```
**結語**
通過以上介紹，我們成功地展示了如何利用Canvas技術在網頁上實現兩種不同的煙花拖尾效果。無論是點陣式的粒子軌跡，還是線條追蹤形成的連貫軌跡，都能帶給用戶強烈的視覺沖擊力。理解并掌握這兩種實現方式，無疑會讓你在Web前端設計與開發領域更加游刃有余，能夠創造出更多驚艷的交互式視覺體驗。而實際應用中，根據具體需求，還可以進一步優化細節，例如增加色彩漸變、粒子形狀變化等特性，使煙花特效更為豐富多樣。不斷探索Canvas的無窮魅力，你將在Web世界中描繪出屬于自己的璀璨星空！
女生總是會在被求婚的時候感動的痛哭流涕，作為程序員的你如果提前給自己的女票一個求婚的動畫，想象一下她會不會很感動呢？
今天就教大家用CSS3來做一個求婚的動畫效果吧，源碼已經放在了Github上，感興趣的可以認真看下源碼，地址如下：
https://github.com/zhouxiongking/article-pages/tree/master/articles/wedding
CSS
首先我們來看看實際運行出來的效果，如下圖所示。
效果圖
在整個效果中，其實是用到了一系列的圖片，然后控制圖片的出現順序以及出現和結束的位置。
在這個效果中，主要應用到的是animation屬性，如果對這個屬性還不是很了解的，可以先去學習一下。接下來我們具體分析整個動態是怎么實現的。
首先，我們看看頁面的構成，包括文字，其他的都是圖片，包括三個煙花效果，男孩，女孩，男孩手中的花，底部的花。頁面HTML代碼如下所示。
頁面HTML
文字部分主要是有一個平移的效果，所以使用translate屬性即可。
文字部分動畫
在文字旁邊的煙花效果實際是一張圖片從中心點向外的擴張，因此可以使用scale屬性實現，然后通過時間的不同，來顯示出不同的煙花。
煙花效果
圖中的女孩實際是站著不動，只是通過改變透明度來顯示出動畫效果，因此可以使用opacity屬性來實現。
女孩效果
圖中的男孩實際有一個向女孩移動的效果，因此也是通過translate屬性來實現。
男孩效果
男孩手中的鮮花實際上也是一個由中心點向外擴張的效果，并且改變透明度，通過scale和opacity屬性實現。
手中鮮花效果
底部的鮮花實際是由兩張圖片重復顯示組成，然后給每張圖片增加一個動畫效果，從效果圖中可以看出是有一個從下到上的平移過程，因此也是使用translate屬性實現。
底部鮮花效果
至此所有的動畫效果都已經講解完畢了，雖然每個動畫只是用到一兩個屬性，但是組合之后就可以完成這樣一個小巧的求婚動畫，是不是很有趣呢?
當然文中的代碼并不是全部的實現，文中的代碼只包括使用CSS3的動畫效果的實現，全部的代碼可以去Github上去看。
今天的這篇文章學會了嗎？
用dtns.network德塔世界（開源的智體世界引擎），策劃和設計《喬布斯超大型的開源3D紀念館》的系列教程。dtns.network是一款主要由JavaScript編寫的智體世界引擎（內嵌了three.js編輯器的定制版-支持以第一視角游覽3D場館），可以在瀏覽器和node.js、deno、electron上運行，它是一個跨平臺的軟件，支持多個操作系統使用！
下面分為幾步介紹，如何基于dtns.plugin實現煙花插件的制作。該《煙花插件》采用開源的js-canvas繪制燃放煙花的特效。通過dtns.plugin（基于vue2.x版本構建《煙花插件》），通過npm build lib編譯生成index.js，將index.js和index.json配置文件，壓縮生成dpkg的類似各類小程序安裝包的插件。
基于js原生開發的dtns.plugin插件，擁有移植方便，使用簡單，易于傳播的特點。并且上手簡單，特別容易開發。是除了poplang智體編程之外，極好的插件開發技術棧。可以輕松地在dtns.network智體世界和dtns.connector客戶端中，實現各類輕應用（例如dpkg、xverse、xcard等）開發的利器！
這也是構建dtns.os（智體OS）的利器！
注：第一次點擊會下載dpkg插件文件（并提示文件保存路徑——游覽器）；第二次點擊會進入“煙花插件”頁面（/firework路徑，后面會講到如何配置這個頁面路由路徑）
注：由于頂部無【返回】按鈕，須通過游覽器的回退按鈕或手機上的返回觸摸鍵返回頭榜頁面。
注：如上圖所示，在dtns.plugin/pkgs/pages/firework/FireWork.vue中查看到template標簽，繼續向下滑動，可以看到這個是一個典型的vue文件（如下圖所示）
注：可以看到vue模板template的name為FireWork（插件名稱，后續引入這個component組件，需要用到，并且在dpkg插件的配置文件index.json中也需要聲明）
注：須將剛才的Firework.vue組件，導入為FireWork變量，并且存放于components數組中，以便install函數安裝（在vue中安裝為全局組件，以方便導入dtns.connector后能按組件名稱（name）進行加載插件。
注：通過上述的scripts中的指令，可以看到運行npm run lib，即可編譯生成index.js庫文件（后續改名為index.js插件文件）
在vscode終端中運行npm run lib指令后，生成lib\dtns-plugin.um.min.js庫文件（如下圖所示）
注：后續步驟，會將這個文件修改為index.js的dpkg插件js文件。
注：打開demo.html，可以看到將./lib/dtns-plugin.um.js庫文件導入，并引入了vue.min.js庫文件，然后在div-id=”app”的html元素正方，通過fire-work標簽引入了名稱為FireWork的組件。這是一個典型的vue2.x的web應用。Vue.js開發者應該很快能理解它。
打開剛才的dtns.plugin/demo.html，可以看到如上效果圖
注：亦可復制dtns-plugin.um.js文件（但是文件未經壓縮，會導致插件dpkg文件變大）
注：只有index.js才能被dtns.connector真正識別并導入插件成功。
注：這是一個[]的數組，里面包含了一個{}json對象
注2：屬性name是插件的名稱；path代表了插件加載后打開的路徑，workPath是代表在ibchat智體IB中輸入指令“firework”（“word”屬性的值）后路徑的路徑。
注３：url屬性務必為剛才的vue組件名“FIreWork”——寫錯將導致該插件無法被識別并導入——并且type屬性須為“name”，不能為vue或其它值。
注４：其它的title、desc、author、date按照開發者實際情況填寫即可。
注：將index.js和index.json直接右鍵菜單，選擇壓縮文件為zip。然后將.zip文件后綴修改為.dpkg（注意，有些操作系統會隱藏這個文件格式后綴，將在【文件夾選項-查看文件格式】等方式實現文件后綴的查看和修改為.dpkg。
點擊+號后，進入發布頭榜頁面（如下圖所示）
注：將剛才壓縮生成的firework-4.dpkg輕應用包，以文件方式上傳。并將頭榜內容設置為“煙花插件-4”，并點擊右上角“確認”按鈕，發布插件成功！
進入3D場景編輯器（如下圖所示）
注：通過滾動球控制玩家視角正對著“喬布斯傳”3D擺件正前方。
注：我們看到，通過$.g_firework_onload實現了對煙花插件的全局函數的調用——以實現在3D紀念館中燃放煙花。
注2：通過ib3.file.go obj_file* onflag實現了煙花插件的預加載（不須人工點擊，實現自動安裝煙花插件——后續的dtns.os智體操作系統，亦可通過該指令實現了插件的自動化部署和全局函數的調用）
注：點擊屏幕中間，這些煙花特效會關閉（亦是在FireWork.vue中實現了該事件的綁定）
通過上述16步，我們成功完成了“煙花插件”的制作。通過dtns.plugin插件引擎，我們成功的構建了dpkg插件文件，從而直接通過頭榜上傳和頭榜支付購買煙花插件.dpkg文件的方式，為dtns.connector德塔世界連接器融入了煙花插件功能（并實現了3D場館中調用插件全局函數）。最終實現了3D場館的擺件點擊播放煙花插件動畫，完整實現了一個從vue插件構建，上傳發布，文件鎖售賣插件，在poplang智體編程場景中調用全局函數使用它的完整閉環。
整個dpkg插件的體驗非常完整。可以看到，使用dpkg和dtns.plugin插件系統，可輕松構建dtns.connector的輕應用插件生態。插件的開發、部署、上傳、體驗、銷售、購買均非常方便。非常適合構建【插件商店】生態、插件開發者生態、插件開源生態等。
總結而言：dtns.connector德塔世界連接器，擁有了dpkg輕應用生態（融入了vue.js插件開發生態），變得更像是一個基于游覽器原生應用的操作系統：可命名為dtns.os操作系統。所有插件和項目均為開源，歡迎體驗！
注：dtns.network德塔世界（開源的智體世界引擎）是在github和gitee上開源的項目！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
