推薦十個基于 Canvas 的優秀開源項目！

作者：CUGGZ 2023-05-31 10:08:51

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

在 Web 開發中，Canvas 是一個強大的繪圖技術，可以實現各種有趣的交互效果和動態圖形。本文將盤點 10 個基于 Canvas 的開源項目，旨在為大家提供開發靈感和思路，以便更好地探索并應用 Canvas 技術！

canvas-editor

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

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

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

lucky-canvas

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

Excalidraw

Excalidraw 是一個開源的在線白板工具，主要用于創建簡單直觀的圖形和草圖，支持共享和協作。以下是 Excalidraw 的主要特點：

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

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

fireworks-js

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

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

該項目提供了多種框架的實現：

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

Luckysheet

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

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

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

rough

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

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

Signature Pad

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

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

canvas-confetti

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