發(fā)現(xiàn)了幾個(gè)賊有意思的開源項(xiàng)目!
在 Web 開發(fā)中，Canvas 是一個(gè)強(qiáng)大的繪圖技術(shù)，可以實(shí)現(xiàn)各種有趣的交互效果和動(dòng)態(tài)圖形。本文將盤點(diǎn) 10 個(gè)基于 Canvas 的開源項(xiàng)目，旨在為大家提供開發(fā)靈感和思路，以便更好地探索并應(yīng)用 Canvas 技術(shù)！
canvas-editor
canvas-editor 是一個(gè)基于 canvas/svg 的富文本編輯器，類似 word。其具有以下特點(diǎn)：
- 所見即所得：類word可分頁(yè)，所見即所得
- 輕量的數(shù)據(jù)結(jié)構(gòu)：一段JSON即可呈現(xiàn)復(fù)雜樣式
- 豐富的功能：支持常見富文本操作、表格、水印、控件、公式等
- 使用方便：官方發(fā)布核心npm包，菜單欄、工具欄可自行維護(hù)
- 靈活的開發(fā)機(jī)制：通過(guò)接口可獲取生命周期、事件回調(diào)、自定義右鍵菜單、快捷鍵等
- 完全類型化的API：靈活的 API 和完整的 TypeScript 類型
Github：https://github.com/Hufe921/canvas-editor
lucky-canvas
lucky-canvas 是一套基于 TS + Canvas 開發(fā)的【大轉(zhuǎn)盤 / 九宮格 / 老虎機(jī)】抽獎(jiǎng)插件，一套源碼適配多端框架 JS / Vue / React / Taro / UniApp / 微信小程序等，獎(jiǎng)品 / 文字 / 圖片 / 顏色 / 按鈕均可配置，支持同步 / 異步抽獎(jiǎng)，概率前 / 后端可控，自動(dòng)根據(jù) dpr 調(diào)整清晰度適配移動(dòng)端。
Github：https://github.com/buuing/lucky-canvas
Excalidraw
Excalidraw 是一個(gè)開源的在線白板工具，主要用于創(chuàng)建簡(jiǎn)單直觀的圖形和草圖，支持共享和協(xié)作。以下是 Excalidraw 的主要特點(diǎn)：
- 簡(jiǎn)單易用：具有直觀簡(jiǎn)單的界面和操作方式，用戶可以輕松創(chuàng)建和編輯圖形，并實(shí)現(xiàn)各種設(shè)計(jì)需求。
- 實(shí)時(shí)協(xié)作：支持多人實(shí)時(shí)協(xié)作，用戶可以與其他人一起編輯和討論，在線完成協(xié)作任務(wù)。
- 自由繪制和對(duì)象管理：提供了自由繪制、文本框、箭頭、線段、矩形、橢圓、圖標(biāo)等多種基本對(duì)象，并支持對(duì)這些對(duì)象進(jìn)行移動(dòng)、復(fù)制、旋轉(zhuǎn)、縮放、對(duì)齊等操作，幫助用戶實(shí)現(xiàn)更為精細(xì)的設(shè)計(jì)。
- 高度靈活性：支持導(dǎo)出為SVG、PNG、Clipboard等多種格式，方便用戶進(jìn)行分享和保存。
Github：https://github.com/excalidraw/excalidraw
fireworks-js
fireworks-js 是一個(gè)基于 Canvas 的動(dòng)畫庫(kù)，用于在網(wǎng)頁(yè)上制作煙花特效。該庫(kù)的特點(diǎn)如下：
- 輕量級(jí)：fireworks-js 體積小，不依賴其他庫(kù)或框架，易于集成。
- 易于使用：只需幾行代碼就可以創(chuàng)建出炫目的煙花特效，具有良好的可定制性和可擴(kuò)展性。
- 動(dòng)畫效果逼真：fireworks-js 采用粒子系統(tǒng)實(shí)現(xiàn)煙花特效，能夠模擬出逼真的爆炸、飛濺和星光等效果。
- 瀏覽器兼容性良好：可以在主流的現(xiàn)代瀏覽器上運(yùn)行，支持多種設(shè)備和分辨率，包括移動(dòng)端。
該項(xiàng)目提供了多種框架的實(shí)現(xiàn)：
Github：https://github.com/crashmax-dev/fireworks-js
Luckysheet
Luckysheet 是一個(gè)純前端基于 Canvas 的類似 excel 的在線表格，功能強(qiáng)大、配置簡(jiǎn)單、完全開源。其具有以下功能：
- 格式：樣式、條件格式、文本對(duì)齊和旋轉(zhuǎn)、文本截?cái)?、溢出、自?dòng)換行、多種數(shù)據(jù)類型、單元格分割樣式
- 單元格：拖放、填充柄、多選、查找和替換、定位、合并單元格、數(shù)據(jù)驗(yàn)證
- 行和列：隱藏、插入、刪除行或列、凍結(jié)和拆分文本
- 操作：撤消、重做、復(fù)制、粘貼、剪切、熱鍵、格式刷、拖放選擇
- 公式和函數(shù)：內(nèi)置、遠(yuǎn)程和自定義公式
- 表：過(guò)濾、排序
- 增強(qiáng)功能：數(shù)據(jù)透視表、圖表、評(píng)論、協(xié)同編輯、插入圖片、矩陣計(jì)算、截圖、復(fù)制為其他格式、EXCEL導(dǎo)入導(dǎo)出等。
Github：https://github.com/dream-num/Luckysheet
rough
Rough.js 是一個(gè)輕量級(jí)的（大約 8k），基于 Canvas 的可以繪制出粗略的手繪風(fēng)格的圖形庫(kù)。該庫(kù)提供繪制線條、曲線、弧線、多邊形、圓形和橢圓的基礎(chǔ)能力，同時(shí)支持繪制 SVG 路徑。除此之外，Rough.js 還提供了大量的可自定義選項(xiàng)，可以調(diào)整線寬、線條顏色、填充顏色、字體樣式、背景顏色等，以使圖形更加個(gè)性化。
Github：https://github.com/rough-stuff/rough
Signature Pad
Signature Pad 是一個(gè)基于 Canvas 實(shí)現(xiàn)的簽名庫(kù)，用于繪制簽名。它可以在所有現(xiàn)代桌面和移動(dòng)瀏覽器中使用，不依賴于任何外部庫(kù)。Signature Pad提供了許多可自定義的選項(xiàng)，如筆畫顏色、粗細(xì)、背景色、畫布大小、簽名格式等，可以輕松實(shí)現(xiàn)不同的簽名風(fēng)格和功能。
Github：https://github.com/szimek/signature_pad
canvas-confetti
canvas-confetti 是一個(gè)基于 Canvas 的庫(kù)，用于在 Web 頁(yè)面中實(shí)現(xiàn)炫酷的彩色紙屑動(dòng)畫效果。它實(shí)現(xiàn)了高性能、流暢的紙屑動(dòng)畫效果，同時(shí)兼容各種現(xiàn)代瀏覽器。提供了許多可自定義的選項(xiàng)，如紙屑顏色、形狀、數(shù)量、速度、角度、發(fā)射器位置等，可以輕松實(shí)現(xiàn)不同的紙屑效果。并支持多種觸發(fā)方式，如點(diǎn)擊按鈕、滾動(dòng)頁(yè)面、定時(shí)觸發(fā)等，可根據(jù)需求進(jìn)行定制。
Github：https://github.com/catdad/canvas-confetti
x-spreadsheet
x-spreadsheet 是一個(gè)基于 Web(es6) canvas 構(gòu)建的輕量級(jí) Excel 開發(fā)庫(kù)。其具有以下特點(diǎn)：
- 輕量級(jí)：完整功能，包含所有插件。代碼打包后只不到 200kb
- 易于使用：如果只需要一些簡(jiǎn)單的功能可以零配置
- 數(shù)據(jù)驅(qū)動(dòng)：調(diào)整數(shù)據(jù)非常的簡(jiǎn)單快捷
sheet-demo.pngGithub：https://github.com/myliang/x-spreadsheet
QRCanvas
QRCanvas 是一個(gè)基于 canvas 的 JavaScript 二維碼生成工具。其具有以下特點(diǎn)：
- 僅依賴 canvas，兼容性好
- 簡(jiǎn)單，僅僅是需要一些數(shù)據(jù)的配置
- 定制化功能豐富
- 支持 Node.js
- 方便在 React 和 Vue 中使用
- 支持所有主流的瀏覽器
Github：https://github.com/gera2ld/qrcanvas
歡迎學(xué)編程的朋友們加入魚皮的? 編程知識(shí)星球 ?，和上萬(wàn)名學(xué)編程的同學(xué)共享知識(shí)、交流進(jìn)步，學(xué)習(xí)原創(chuàng)項(xiàng)目并享有答疑指導(dǎo)服務(wù)。
往期推薦
通過(guò) Desktop 學(xué) Docker 也太簡(jiǎn)單了