大家好，我是Echa。

前段時間有部分粉絲私信小編說道用html5 可以實現(xiàn)放煙花效果嗎？可以實現(xiàn)下紅包雨、大轉(zhuǎn)盤、九宮格、老虎機、彩色紙屑慶祝等等這些效果嗎？其實這些市場上大家都經(jīng)?？匆娺^，小編2023年春季也發(fā)布相關(guān)的優(yōu)質(zhì)圖文，有興趣的也可以回頭看看：

幾行代碼實現(xiàn)2023新年祝福

今天小編帶著大家知道在 Web 開發(fā)中，Canvas 是一個強大的繪圖技術(shù)，可以實現(xiàn)各種有趣的交互效果和動態(tài)圖形。并且分享20個優(yōu)秀的畫布 Canvas 開源項目，讓大家提供開發(fā)靈感和思路，以便更好地探索并應(yīng)用 Canvas 技術(shù)。喜歡的粉絲們點個贊、先收藏再轉(zhuǎn)發(fā)分享給身邊更多的朋友，最后加個關(guān)注。

全文大綱

1. lucky-canvas 是一套基于 TS + Canvas 開發(fā)的【大轉(zhuǎn)盤 / 九宮格 / 老虎機】抽獎插件。
2. Excalidraw 是一個開源的在線白板工具。
3. fireworks-js 是一個基于 Canvas 的動畫庫
4. canvas-editor 是一個基于 canvas/svg 的富文本編輯器
5. Luckysheet 是一個純前端基于 Canvas 的類似 excel 的在線表格
6. canvas-confetti 是一個基于 Canvas 的庫，用于在 Web 頁面中實現(xiàn)炫酷的彩色紙屑動畫效果
7. x-spreadsheet 是一個基于 Web(es6) canvas 構(gòu)建的輕量級 Excel 開發(fā)庫
8. QRCanvas 是一個基于 canvas 的 JavaScript 二維碼生成工具
9. Signature Pad 是一個基于 Canvas 實現(xiàn)的簽名庫
10. Rough.js 基于 Canvas 的可以繪制出粗略的手繪風(fēng)格的圖形庫。
11. Fabric.js是一個強大且簡單的Javascript HTML5 Canvas庫。
12. uCharts 是一款高性能的前端應(yīng)用圖表庫
13. SpriteJS 是一款由360奇舞團開源的跨終端 canvas 繪圖框架
14. oCanvas是一個JavaScript框架，用于簡化HTML5 Canvas標簽的使用
15. jCanvas 就是一個 jQuery 的繪圖插件
16. RGraph是一個使用HTML5 Canvas標簽實現(xiàn)的圖表制作Library
17. Two.js 是面向現(xiàn)代 Web 瀏覽器的一個二維繪圖 API
18. Paper.js是一款開源的矢量圖形腳本框架
19. EaselJS 是一個封裝了 HTML5 畫布(Canvas) 元素的 JavaScript 庫
20. Pixi.js 是一個 2D webGL 渲染器，提供無縫 Canvas 回退，支持主流瀏覽器，包括桌面和移動

lucky-canvas

官網(wǎng)：https://100px.net/

Github：https://github.com/buuing/lucky-canvas

基于 TS + Canvas 開發(fā)的【大轉(zhuǎn)盤 / 九宮格 / 老虎機】抽獎插件， 一套源碼適配多端框架 JS / Vue / React / Taro / UniApp / 微信小程序等， 獎品 / 文字 / 圖片 / 顏色 / 按鈕均可配置，支持同步 / 異步抽獎， 概率前 / 后端可控， 自動根據(jù) dpr 調(diào)整清晰度適配移動端。

 Excalidraw

官網(wǎng)： https://excalidraw.com/

Github： https://github.com/excalidraw/excalidraw

Excalidraw 是一個開源的在線白板工具，主要用于創(chuàng)建簡單直觀的圖形和草圖，支持共享和協(xié)作。

特點

以下是 Excalidraw 的主要特點：

• 簡單易用：具有直觀簡單的界面和操作方式，用戶可以輕松創(chuàng)建和編輯圖形，并實現(xiàn)各種設(shè)計需求。
• 實時協(xié)作：支持多人實時協(xié)作，用戶可以與其他人一起編輯和討論，在線完成協(xié)作任務(wù)。
• 自由繪制和對象管理：提供了自由繪制、文本框、箭頭、線段、矩形、橢圓、圖標等多種基本對象，并支持對這些對象進行移動、復(fù)制、旋轉(zhuǎn)、縮放、對齊等操作，幫助用戶實現(xiàn)更為精細的設(shè)計。
• 高度靈活性：支持導(dǎo)出為SVG、PNG、Clipboard等多種格式，方便用戶進行分享和保存。

Excalidraw編輯器（npm包）支持：

•  免費和開源。
•  無限的基于畫布的白板。
• ?? 手繪風(fēng)格。
•  黑暗模式。
• ? 可自定義。
•  圖像支持。
•  形狀庫支持。
•  本地化（i18n）支持。
• ? 導(dǎo)出到PNG、SVG和剪貼板。
•  打開格式-將圖形導(dǎo)出為.excalidraw json文件。
• ?? 廣泛的工具-矩形，圓形，菱形，箭頭，線，自由繪制，橡皮擦。。。
• ?? 箭頭綁定和標記箭頭。
•  撤消/恢復(fù)。
•  支持縮放和平移。

 fireworks-js

官網(wǎng)： https://fireworks.js.org/

Github： https://github.com/crashmax-dev/fireworks-js

fireworks-js 是一個基于 Canvas 的動畫庫，用于在網(wǎng)頁上制作煙花特效。該庫的特點如下：

• 輕量級：fireworks-js 體積小，不依賴其他庫或框架，易于集成。
• 易于使用：只需幾行代碼就可以創(chuàng)建出炫目的煙花特效，具有良好的可定制性和可擴展性。
• 動畫效果逼真：fireworks-js 采用粒子系統(tǒng)實現(xiàn)煙花特效，能夠模擬出逼真的爆炸、飛濺和星光等效果。
• 瀏覽器兼容性良好：可以在主流的現(xiàn)代瀏覽器上運行，支持多種設(shè)備和分辨率，包括移動端。

該項目提供了多種框架的實現(xiàn)：

 canvas-editor

在線演示：https://hufe.club/canvas-editor/

Github： https://github.com/Hufe921/canvas-editor

canvas-editor 是一個基于 canvas/svg 的富文本編輯器，類似 word。其具有以下特點：

• 所見即所得：類word可分頁，所見即所得
• 輕量的數(shù)據(jù)結(jié)構(gòu)：一段JSON即可呈現(xiàn)復(fù)雜樣式
• 豐富的功能：支持常見富文本操作、表格、水印、控件、公式等
• 使用方便：官方發(fā)布核心npm包，菜單欄、工具欄可自行維護
• 靈活的開發(fā)機制：通過接口可獲取生命周期、事件回調(diào)、自定義右鍵菜單、快捷鍵等
• 完全類型化的API：靈活的 API 和完整的 TypeScript 類型

 Luckysheet

官網(wǎng)：https://dream-num.github.io/LuckysheetDocs/

Github： https://github.com/dream-num/Luckysheet

Luckysheet 是一個純前端基于 Canvas 的類似 excel 的在線表格，功能強大、配置簡單、完全開源。其具有以下功能：

• 格式：樣式、條件格式、文本對齊和旋轉(zhuǎn)、文本截斷、溢出、自動換行、多種數(shù)據(jù)類型、單元格分割樣式
• 單元格：拖放、填充柄、多選、查找和替換、定位、合并單元格、數(shù)據(jù)驗證
• 行和列：隱藏、插入、刪除行或列、凍結(jié)和拆分文本
• 操作：撤消、重做、復(fù)制、粘貼、剪切、熱鍵、格式刷、拖放選擇
• 公式和函數(shù)：內(nèi)置、遠程和自定義公式
• 表：過濾、排序
• 增強功能：數(shù)據(jù)透視表、圖表、評論、協(xié)同編輯、插入圖片、矩陣計算、截圖、復(fù)制為其他格式、EXCEL導(dǎo)入導(dǎo)出等。

 canvas-confetti

官網(wǎng)：https://www.kirilv.com/canvas-confetti/

Github： https://github.com/catdad/canvas-confetti

canvas-confetti 是一個基于 Canvas 的庫，用于在 Web 頁面中實現(xiàn)炫酷的彩色紙屑動畫效果。它實現(xiàn)了高性能、流暢的紙屑動畫效果，同時兼容各種現(xiàn)代瀏覽器。提供了許多可自定義的選項，如紙屑顏色、形狀、數(shù)量、速度、角度、發(fā)射器位置等，可以輕松實現(xiàn)不同的紙屑效果。并支持多種觸發(fā)方式，如點擊按鈕、滾動頁面、定時觸發(fā)等，可根據(jù)需求進行定制。

 x-spreadsheet

官網(wǎng)：https://myliang.github.io/x-spreadsheet/

Github： https://github.com/myliang/x-spreadsheet

x-spreadsheet 是一個基于 Web(es6) canvas 構(gòu)建的輕量級 Excel 開發(fā)庫。其具有以下特點：

• 輕量級：完整功能，包含所有插件。代碼打包后只不到 200kb
• 易于使用：如果只需要一些簡單的功能可以零配置
• 數(shù)據(jù)驅(qū)動：調(diào)整數(shù)據(jù)非常的簡單快捷

 QRCanvas

官網(wǎng)：https://gera2ld.github.io/qrcanvas/

Github： https://github.com/gera2ld/qrcanvas

QRCanvas 是一個基于 canvas 的 JavaScript 二維碼生成工具。其具有以下特點：

• 僅依賴 canvas，兼容性好
• 簡單，僅僅是需要一些數(shù)據(jù)的配置
• 定制化功能豐富
• 支持 Node.js
• 方便在 React 和 Vue 中使用
• 支持所有主流的瀏覽器

 Signature Pad

官網(wǎng)：http://szimek.github.io/signature_pad/

Github： https://github.com/szimek/signature_pad

Signature Pad 是一個基于 Canvas 實現(xiàn)的簽名庫，用于繪制簽名。它可以在所有現(xiàn)代桌面和移動瀏覽器中使用，不依賴于任何外部庫。Signature Pad提供了許多可自定義的選項，如筆畫顏色、粗細、背景色、畫布大小、簽名格式等，可以輕松實現(xiàn)不同的簽名風(fēng)格和功能。

 Rough.js

官網(wǎng)： https://roughjs.com/

Github： https://github.com/rough-stuff/rough

Rough.js 是一個輕量級的（大約 8k），基于 Canvas 的可以繪制出粗略的手繪風(fēng)格的圖形庫。該庫提供繪制線條、曲線、弧線、多邊形、圓形和橢圓的基礎(chǔ)能力，同時支持繪制 SVG 路徑。除此之外，Rough.js 還提供了大量的可自定義選項，可以調(diào)整線寬、線條顏色、填充顏色、字體樣式、背景顏色等，以使圖形更加個性化。

 Fabric.js

官網(wǎng)： http://fabricjs.com/

Github： https://github.com/fabricjs/fabric.js

Fabric.js 是一個強大且簡單的Javascript HTML5 Canvas庫。

Canvas提供一個好的畫布能力, 但是Api不夠友好。繪制簡單圖形其實還可以, 不過做一些復(fù)雜的圖形繪制, 編寫一些復(fù)雜的效果，就不是那么方便了。Fabric.js就是為此而開發(fā)，它主要用對象的方式去編寫代碼。

Fabric.js能做的事情

• 在Canvas上創(chuàng)建、填充圖形（包括圖片、文字、規(guī)則圖形和復(fù)雜路徑組成圖形）。
• 給圖形填充漸變顏色。
• 組合圖形（包括組合圖形、圖形文字、圖片等）。
• 設(shè)置圖形動畫及用戶交互。
• 生成JSON、SVG數(shù)據(jù)等。
• 生成Canvas對象自帶拖拉拽功能。

它提供了靈活豐富的Api和可配置化參數(shù)輕松實現(xiàn)復(fù)雜的效果，該開源庫已被許多開發(fā)者用于項目實踐中，廣受好評。

 uCharts

官網(wǎng)：https://www.ucharts.cn/v2/#/

Gitee： https://gitee.com/uCharts/uCharts

uCharts是一款高性能的前端應(yīng)用圖表庫，開發(fā)人員編寫一套代碼，可以在Web、iOS、Android以及小程序中使用。

全端全平臺支持，開箱即用，支持PC、H5、小程序（微信/支付寶/百度/頭條/飛書/QQ/快手/釘釘/淘寶/京東）、Vue、Taro等更多支持canvas的框架，體積小巧、調(diào)用簡單方便、性能及體驗極佳。

uCharts堅持開源，遵循Apache Licence 2.0的開源協(xié)議，在項目中應(yīng)用中無需支付任何費用，即可將 uCharts 應(yīng)用到實際的生成環(huán)境中。

 SpriteJS

官網(wǎng)： http://spritejs.com/

Gitee： https://github.com/spritejs/spritejs

SpriteJS 是一款由360奇舞團開源的跨終端 canvas 繪圖框架，可以基于 canvas 快速繪制結(jié)構(gòu)化 UI、動畫和交互效果，并發(fā)布到任何擁有canvas環(huán)境的平臺上（比如瀏覽器、小程序和node）。

我們知道，canvas API可以很靈活地繪制各種矢量圖形到畫布上，但是 canvas API 本身比較低級，比如我們要在畫布中央繪制一個帶有圓角的紅色矩形，使用 canvas 原生的 API，需要這樣：

const canvas = document.getElementById('paper')
const context = canvas.getContext('2d')

const [x, y, w, h, r] = [200, 200, 200, 200, 50]

context.fillStyle = 'red'
context.beginPath()
context.moveTo(x + r, y)
context.arcTo(x + w, y, x + w, y + h, r)
context.arcTo(x + w, y + h, x, y + h, r)
context.arcTo(x, y + h, x, y, r)
context.arcTo(x, y, x + w, y, r)
context.closePath()
context.fill()

如果實現(xiàn)相同的效果，使用 SpriteJS 是這樣寫：

const scene = new spritejs.Scene('#container')
const layer = scene.layer()

const s = new spritejs.Sprite({
  anchor: 0.5,
  bgcolor: 'red',
  pos: [300, 300],
  size: [200, 200],
  borderRadius: 50,
})

layer.append(s)

Sprite 為圖形創(chuàng)建類似于 DOM 的對象模型，因此我們可以像創(chuàng)建 DOM 元素一樣，創(chuàng)建 Sprite 元素，并將它們 append 到 layer 上，從而將元素呈現(xiàn)到畫布上。SpriteJS 有如下特點：

• 基于 canvas 繪制的文檔對象模型
• 四種基本精靈類型：Sprite、Path、Label、Group
• 支持基礎(chǔ)和高級的精靈屬性，精靈盒模型、屬性與 CSS3 具有高度一致性。
• 簡便而強大的 Transition、Animation API
• 支持雪碧圖和資源預(yù)加載
• 可擴展的事件機制
• 高性能的緩存策略
• 對 D3、Matter-js、Proton和其他第三方庫友好
• 跨平臺，支持服務(wù)端渲染、微信小程序

 oCanvas

官網(wǎng)： http://ocanvas.org/

Gitee： https://github.com/koggdal/ocanvas

oCanvas是一個JavaScript庫，旨在簡化HTML5 Canvas的開發(fā)。不用處理像素，而是處理對象。它非常簡單明了。請看一下這些例子，看看它有多容易。

oCanvas通過在原生像素繪制方法和創(chuàng)建并添加到畫布中的對象之間建立橋梁，使畫布開發(fā)更容易理解和執(zhí)行。現(xiàn)在可以非常容易地創(chuàng)建對象、更改這些對象的屬性并向其添加事件，而一切都很正常，因為oCanvas可以為您處理背景內(nèi)容。

jCanvas

官網(wǎng)：https://projects.calebevans.me/jcanvas/

Gitee： https://github.com/caleb531/jcanvas

＜canvas＞元素是HTML5之外的一個新元素。它允許您在一個名為畫布的空白元素上繪制形狀、路徑、圖像和其他圖形。

創(chuàng)建畫布

在畫布上繪制之前，您需要創(chuàng)建一個。

<canvas width=“300”height=“150”></canvas>

當(dāng)然，畫布可以是您想要的任何寬度/高度。您可能還希望為畫布提供一個ID（以供將來參考）。

附帶說明一下，您無法通過CSS準確設(shè)置畫布的寬度和高度；您只能通過canvas元素的width和height屬性來執(zhí)行此操作。

導(dǎo)入jCanvas

您還需要以某種方式將jCanvas添加到頁面中（通常使用＜script＞元素即可）。

<script src=“jcanvas.min.js”></script>

 RGraph

官網(wǎng)： https://www.rgraph.net/

Gitee： https://github.com/heyesr/rgraph

RGraph是一個使用HTML5 Canvas標簽實現(xiàn)的圖表制作Library。利用該Library生成的Chart具有可交互性，當(dāng)鼠標點擊或移過時會顯示相應(yīng)的信息，可以動態(tài)加載Chart或?qū)μ厥恻c進行縮放。

 Two.js

官網(wǎng)： https://two.js.org/

Gitee： https://github.com/jonobr1/two.js

Two.js 是面向現(xiàn)代 Web 瀏覽器的一個二維繪圖 API。Two.js 可以用于多個場合：SVG，Canvas 和 WebGL，旨在使平面形狀和動畫的創(chuàng)建更方便，更簡潔。

 Paper.js

官網(wǎng)： http://paperjs.org/

Gitee： http://github.com/paperjs/paper.js

Paper.js是一款開源的矢量圖形腳本框架，基于 HTML5 Canvas 開發(fā)，提供清晰的場景圖、DOM和大量強大的功能用來創(chuàng)建各種向量圖和貝塞爾曲線。

EaselJS

官網(wǎng)：https://createjs.com/easeljs

Gitee： https://github.com/createjs

EaselJS 是一個封裝了 HTML5 畫布(Canvas) 元素的 JavaScript 庫。

Pixi.js

官網(wǎng)： https://pixijs.com/

Gitee： https://github.com/pixijs/pixijs

Pixi.js 是一個 2D webGL 渲染器，提供無縫 Canvas 回退，支持主流瀏覽器，包括桌面和移動。

最后

一臺電腦,一個鍵盤,盡情揮灑智慧的人生;幾行數(shù)字,幾個字母,認真編寫生活的美好;