盤點20個優秀的畫布 Canvas 開源項目
大家好，我是Echa。
前段時間有部分粉絲私信小編說道用html5 可以實現放煙花效果嗎？可以實現下紅包雨、大轉盤、九宮格、老虎機、彩色紙屑慶祝等等這些效果嗎？其實這些市場上大家都經?？匆娺^，小編2023年春季也發布相關的優質圖文，有興趣的也可以回頭看看：
幾行代碼實現2023新年祝福
今天小編帶著大家知道在 Web 開發中，Canvas 是一個強大的繪圖技術，可以實現各種有趣的交互效果和動態圖形。并且分享20個優秀的畫布 Canvas 開源項目，讓大家提供開發靈感和思路，以便更好地探索并應用 Canvas 技術。喜歡的粉絲們點個贊、先收藏再轉發分享給身邊更多的朋友，最后加個關注。
全文大綱
- lucky-canvas 是一套基于 TS + Canvas 開發的【大轉盤 / 九宮格 / 老虎機】抽獎插件。
- Excalidraw 是一個開源的在線白板工具。
- fireworks-js 是一個基于 Canvas 的動畫庫
- canvas-editor 是一個基于 canvas/svg 的富文本編輯器
- Luckysheet 是一個純前端基于 Canvas 的類似 excel 的在線表格
- canvas-confetti 是一個基于 Canvas 的庫，用于在 Web 頁面中實現炫酷的彩色紙屑動畫效果
- x-spreadsheet 是一個基于 Web(es6) canvas 構建的輕量級 Excel 開發庫
- QRCanvas 是一個基于 canvas 的 JavaScript 二維碼生成工具
- Signature Pad 是一個基于 Canvas 實現的簽名庫
- Rough.js 基于 Canvas 的可以繪制出粗略的手繪風格的圖形庫。
- Fabric.js是一個強大且簡單的Javascript HTML5 Canvas庫。
- uCharts 是一款高性能的前端應用圖表庫
- SpriteJS 是一款由360奇舞團開源的跨終端 canvas 繪圖框架
- oCanvas是一個JavaScript框架，用于簡化HTML5 Canvas標簽的使用
- jCanvas 就是一個 jQuery 的繪圖插件
- RGraph是一個使用HTML5 Canvas標簽實現的圖表制作Library
- Two.js 是面向現代 Web 瀏覽器的一個二維繪圖 API
- Paper.js是一款開源的矢量圖形腳本框架
- EaselJS 是一個封裝了 HTML5 畫布(Canvas) 元素的 JavaScript 庫
- Pixi.js 是一個 2D webGL 渲染器，提供無縫 Canvas 回退，支持主流瀏覽器，包括桌面和移動
lucky-canvas
官網：https://100px.net/
Github：https://github.com/buuing/lucky-canvas
基于 TS + Canvas 開發的【大轉盤 / 九宮格 / 老虎機】抽獎插件， 一套源碼適配多端框架 JS / Vue / React / Taro / UniApp / 微信小程序等， 獎品 / 文字 / 圖片 / 顏色 / 按鈕均可配置，支持同步 / 異步抽獎， 概率前 / 后端可控， 自動根據 dpr 調整清晰度適配移動端。
Excalidraw
官網： https://excalidraw.com/
Github： https://github.com/excalidraw/excalidraw
Excalidraw 是一個開源的在線白板工具，主要用于創建簡單直觀的圖形和草圖，支持共享和協作。
特點
以下是 Excalidraw 的主要特點：
- 簡單易用：具有直觀簡單的界面和操作方式，用戶可以輕松創建和編輯圖形，并實現各種設計需求。
- 實時協作：支持多人實時協作，用戶可以與其他人一起編輯和討論，在線完成協作任務。
- 自由繪制和對象管理：提供了自由繪制、文本框、箭頭、線段、矩形、橢圓、圖標等多種基本對象，并支持對這些對象進行移動、復制、旋轉、縮放、對齊等操作，幫助用戶實現更為精細的設計。
- 高度靈活性：支持導出為SVG、PNG、Clipboard等多種格式，方便用戶進行分享和保存。
Excalidraw編輯器（npm包）支持：
- 免費和開源。
- 無限的基于畫布的白板。
- ?? 手繪風格。
- 黑暗模式。
- ? 可自定義。
- 圖像支持。
- 形狀庫支持。
- 本地化（i18n）支持。
- ? 導出到PNG、SVG和剪貼板。
- 打開格式-將圖形導出為.excalidraw json文件。
- ?? 廣泛的工具-矩形，圓形，菱形，箭頭，線，自由繪制，橡皮擦。。。
- ?? 箭頭綁定和標記箭頭。
- 撤消/恢復。
- 支持縮放和平移。
fireworks-js
官網： https://fireworks.js.org/
Github： https://github.com/crashmax-dev/fireworks-js
fireworks-js 是一個基于 Canvas 的動畫庫，用于在網頁上制作煙花特效。該庫的特點如下：
- 輕量級：fireworks-js 體積小，不依賴其他庫或框架，易于集成。
- 易于使用：只需幾行代碼就可以創建出炫目的煙花特效，具有良好的可定制性和可擴展性。
- 動畫效果逼真：fireworks-js 采用粒子系統實現煙花特效，能夠模擬出逼真的爆炸、飛濺和星光等效果。
- 瀏覽器兼容性良好：可以在主流的現代瀏覽器上運行，支持多種設備和分辨率，包括移動端。
該項目提供了多種框架的實現：
canvas-editor
在線演示：https://hufe.club/canvas-editor/
Github： https://github.com/Hufe921/canvas-editor
canvas-editor 是一個基于 canvas/svg 的富文本編輯器，類似 word。其具有以下特點：
- 所見即所得：類word可分頁，所見即所得
- 輕量的數據結構：一段JSON即可呈現復雜樣式
- 豐富的功能：支持常見富文本操作、表格、水印、控件、公式等
- 使用方便：官方發布核心npm包，菜單欄、工具欄可自行維護
- 靈活的開發機制：通過接口可獲取生命周期、事件回調、自定義右鍵菜單、快捷鍵等
- 完全類型化的API：靈活的 API 和完整的 TypeScript 類型
Luckysheet
官網：https://dream-num.github.io/LuckysheetDocs/
Github： https://github.com/dream-num/Luckysheet
Luckysheet 是一個純前端基于 Canvas 的類似 excel 的在線表格，功能強大、配置簡單、完全開源。其具有以下功能：
- 格式：樣式、條件格式、文本對齊和旋轉、文本截斷、溢出、自動換行、多種數據類型、單元格分割樣式
- 單元格：拖放、填充柄、多選、查找和替換、定位、合并單元格、數據驗證
- 行和列：隱藏、插入、刪除行或列、凍結和拆分文本
- 操作：撤消、重做、復制、粘貼、剪切、熱鍵、格式刷、拖放選擇
- 公式和函數：內置、遠程和自定義公式
- 表：過濾、排序
- 增強功能：數據透視表、圖表、評論、協同編輯、插入圖片、矩陣計算、截圖、復制為其他格式、EXCEL導入導出等。
canvas-confetti
官網：https://www.kirilv.com/canvas-confetti/
Github： https://github.com/catdad/canvas-confetti
canvas-confetti 是一個基于 Canvas 的庫，用于在 Web 頁面中實現炫酷的彩色紙屑動畫效果。它實現了高性能、流暢的紙屑動畫效果，同時兼容各種現代瀏覽器。提供了許多可自定義的選項，如紙屑顏色、形狀、數量、速度、角度、發射器位置等，可以輕松實現不同的紙屑效果。并支持多種觸發方式，如點擊按鈕、滾動頁面、定時觸發等，可根據需求進行定制。
x-spreadsheet
官網：https://myliang.github.io/x-spreadsheet/
Github： https://github.com/myliang/x-spreadsheet
x-spreadsheet 是一個基于 Web(es6) canvas 構建的輕量級 Excel 開發庫。其具有以下特點：
- 輕量級：完整功能，包含所有插件。代碼打包后只不到 200kb
- 易于使用：如果只需要一些簡單的功能可以零配置
- 數據驅動：調整數據非常的簡單快捷
QRCanvas
官網：https://gera2ld.github.io/qrcanvas/
Github： https://github.com/gera2ld/qrcanvas
QRCanvas 是一個基于 canvas 的 JavaScript 二維碼生成工具。其具有以下特點：
- 僅依賴 canvas，兼容性好
- 簡單，僅僅是需要一些數據的配置
- 定制化功能豐富
- 支持 Node.js
- 方便在 React 和 Vue 中使用
- 支持所有主流的瀏覽器
Signature Pad
官網：http://szimek.github.io/signature_pad/
Github： https://github.com/szimek/signature_pad
Signature Pad 是一個基于 Canvas 實現的簽名庫，用于繪制簽名。它可以在所有現代桌面和移動瀏覽器中使用，不依賴于任何外部庫。Signature Pad提供了許多可自定義的選項，如筆畫顏色、粗細、背景色、畫布大小、簽名格式等，可以輕松實現不同的簽名風格和功能。
Rough.js
官網： https://roughjs.com/
Github： https://github.com/rough-stuff/rough
Rough.js 是一個輕量級的（大約 8k），基于 Canvas 的可以繪制出粗略的手繪風格的圖形庫。該庫提供繪制線條、曲線、弧線、多邊形、圓形和橢圓的基礎能力，同時支持繪制 SVG 路徑。除此之外，Rough.js 還提供了大量的可自定義選項，可以調整線寬、線條顏色、填充顏色、字體樣式、背景顏色等，以使圖形更加個性化。
Fabric.js
官網： http://fabricjs.com/
Github： https://github.com/fabricjs/fabric.js
Fabric.js 是一個強大且簡單的Javascript HTML5 Canvas庫。
Canvas提供一個好的畫布能力, 但是Api不夠友好。繪制簡單圖形其實還可以, 不過做一些復雜的圖形繪制, 編寫一些復雜的效果，就不是那么方便了。Fabric.js就是為此而開發，它主要用對象的方式去編寫代碼。
Fabric.js能做的事情
- 在Canvas上創建、填充圖形（包括圖片、文字、規則圖形和復雜路徑組成圖形）。
- 給圖形填充漸變顏色。
- 組合圖形（包括組合圖形、圖形文字、圖片等）。
- 設置圖形動畫及用戶交互。
- 生成JSON、SVG數據等。
- 生成Canvas對象自帶拖拉拽功能。
它提供了靈活豐富的Api和可配置化參數輕松實現復雜的效果，該開源庫已被許多開發者用于項目實踐中，廣受好評。
uCharts
官網：https://www.ucharts.cn/v2/#/
Gitee： https://gitee.com/uCharts/uCharts
uCharts是一款高性能的前端應用圖表庫，開發人員編寫一套代碼，可以在Web、iOS、Android以及小程序中使用。
全端全平臺支持，開箱即用，支持PC、H5、小程序（微信/支付寶/百度/頭條/飛書/QQ/快手/釘釘/淘寶/京東）、Vue、Taro等更多支持canvas的框架，體積小巧、調用簡單方便、性能及體驗極佳。
uCharts堅持開源，遵循Apache Licence 2.0的開源協議，在項目中應用中無需支付任何費用，即可將 uCharts 應用到實際的生成環境中。
SpriteJS
官網： http://spritejs.com/
Gitee： https://github.com/spritejs/spritejs
SpriteJS 是一款由360奇舞團開源的跨終端 canvas 繪圖框架，可以基于 canvas 快速繪制結構化 UI、動畫和交互效果，并發布到任何擁有canvas環境的平臺上（比如瀏覽器、小程序和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()如果實現相同的效果，使用 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 為圖形創建類似于 DOM 的對象模型，因此我們可以像創建 DOM 元素一樣，創建 Sprite 元素，并將它們 append 到 layer 上，從而將元素呈現到畫布上。SpriteJS 有如下特點：
- 基于 canvas 繪制的文檔對象模型
- 四種基本精靈類型：Sprite、Path、Label、Group
- 支持基礎和高級的精靈屬性，精靈盒模型、屬性與 CSS3 具有高度一致性。
- 簡便而強大的 Transition、Animation API
- 支持雪碧圖和資源預加載
- 可擴展的事件機制
- 高性能的緩存策略
- 對 D3、Matter-js、Proton和其他第三方庫友好
- 跨平臺，支持服務端渲染、微信小程序
oCanvas
官網： http://ocanvas.org/
Gitee： https://github.com/koggdal/ocanvas
oCanvas是一個JavaScript庫，旨在簡化HTML5 Canvas的開發。不用處理像素，而是處理對象。它非常簡單明了。請看一下這些例子，看看它有多容易。
oCanvas通過在原生像素繪制方法和創建并添加到畫布中的對象之間建立橋梁，使畫布開發更容易理解和執行?，F在可以非常容易地創建對象、更改這些對象的屬性并向其添加事件，而一切都很正常，因為oCanvas可以為您處理背景內容。
jCanvas
官網：https://projects.calebevans.me/jcanvas/
Gitee： https://github.com/caleb531/jcanvas
＜canvas＞元素是HTML5之外的一個新元素。它允許您在一個名為畫布的空白元素上繪制形狀、路徑、圖像和其他圖形。
創建畫布
在畫布上繪制之前，您需要創建一個。
<canvas width=“300”height=“150”></canvas>當然，畫布可以是您想要的任何寬度/高度。您可能還希望為畫布提供一個ID（以供將來參考）。
附帶說明一下，您無法通過CSS準確設置畫布的寬度和高度；您只能通過canvas元素的width和height屬性來執行此操作。
導入jCanvas
您還需要以某種方式將jCanvas添加到頁面中（通常使用＜script＞元素即可）。
<script src=“jcanvas.min.js”></script>
RGraph
官網： https://www.rgraph.net/
Gitee： https://github.com/heyesr/rgraph
RGraph是一個使用HTML5 Canvas標簽實現的圖表制作Library。利用該Library生成的Chart具有可交互性，當鼠標點擊或移過時會顯示相應的信息，可以動態加載Chart或對特殊點進行縮放。
Two.js
官網： https://two.js.org/
Gitee： https://github.com/jonobr1/two.js
Two.js 是面向現代 Web 瀏覽器的一個二維繪圖 API。Two.js 可以用于多個場合：SVG，Canvas 和 WebGL，旨在使平面形狀和動畫的創建更方便，更簡潔。
Paper.js
官網： http://paperjs.org/
Gitee： http://github.com/paperjs/paper.js
Paper.js是一款開源的矢量圖形腳本框架，基于 HTML5 Canvas 開發，提供清晰的場景圖、DOM和大量強大的功能用來創建各種向量圖和貝塞爾曲線。
EaselJS
官網：https://createjs.com/easeljs
Gitee： https://github.com/createjs
EaselJS 是一個封裝了 HTML5 畫布(Canvas) 元素的 JavaScript 庫。
Pixi.js
官網： https://pixijs.com/
Gitee： https://github.com/pixijs/pixijs
Pixi.js 是一個 2D webGL 渲染器，提供無縫 Canvas 回退，支持主流瀏覽器，包括桌面和移動。
最后
一臺電腦,一個鍵盤,盡情揮灑智慧的人生;幾行數字,幾個字母,認真編寫生活的美好;
