推薦 10 個基於 Canvas 的優秀開源項目!
在 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
lucky-canvas 是一套基於 TS + Canvas 開發的【大轉盤 / 九宮格 / 老虎機】抽獎插件,一套源碼適配多端框架 JS / Vue / React / Taro / UniApp / 微信小程序等,獎品 / 文字 / 圖片 / 顏色 / 按鈕均可配置,支持同步 / 異步抽獎,概率前 / 後端可控,自動根據 dpr 調整清晰度適配移動端。
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 頁面中實現炫酷的彩色紙屑動畫效果。它實現了高性能、流暢的紙屑動畫效果,同時兼容各種現代瀏覽器。提供了許多可自定義的選項,如紙屑顏色、形狀、數量、速度、角度、發射器位置等,可以輕鬆實現不同的紙屑效果。並支持多種觸發方式,如點擊按鈕、滾動頁面、定時觸發等,可根據需求進行定製。
Github: https://github.com/catdad/canvas-confetti
x-spreadsheet
x-spreadsheet 是一個基於 Web(es6) canvas 構建的輕量級 Excel 開發庫。其具有以下特點:
-
輕量級:完整功能,包含所有插件。代碼打包後只不到 200kb
-
易於使用:如果只需要一些簡單的功能可以零配置
-
數據驅動:調整數據非常的簡單快捷
Github: https://github.com/myliang/x-spreadsheet
QRCanvas
QRCanvas 是一個基於 canvas 的 JavaScript 二維碼生成工具。其具有以下特點:
-
僅依賴 canvas,兼容性好
-
簡單,僅僅是需要一些數據的配置
-
定製化功能豐富
-
支持 Node.js
-
方便在 React 和 Vue 中使用
-
支持所有主流的瀏覽器
Github: https://github.com/gera2ld/qrcanvas
本文由 Readfog 進行 AMP 轉碼,版權歸原作者所有。
來源:https://mp.weixin.qq.com/s/ky24MWOiikiMwih9bep9vQ