20個(gè)優(yōu)秀的畫(huà)布 Canvas 開(kāi)源項(xiàng)目,鐵子們有需要的可以收藏一下喲

當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流 →『技術(shù)文檔交流』

admin

2023年6月8日 15:31 本文熱度 1496

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

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

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

全文大綱

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

lucky-canvas

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

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

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

Excalidraw

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

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

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

特點(diǎn)

以下是 Excalidraw 的主要特點(diǎn)：

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

Excalidraw編輯器（npm包）支持：

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

fireworks-js

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

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

fireworks-js 是一個(gè)基于 Canvas 的動(dòng)畫(huà)庫(kù)，用于在網(wǎng)頁(yè)上制作煙花特效。該庫(kù)的特點(diǎn)如下：

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

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

canvas-editor

在線(xiàn)演示：https://hufe.club/canvas-editor/

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

canvas-editor 是一個(gè)基于 canvas/svg 的富文本編輯器，類(lèi)似 word。其具有以下特點(diǎn)：

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

Luckysheet

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

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

Luckysheet 是一個(gè)純前端基于 Canvas 的類(lèi)似 excel 的在線(xiàn)表格，功能強(qiáng)大、配置簡(jiǎn)單、完全開(kāi)源。其具有以下功能：

格式：樣式、條件格式、文本對(duì)齊和旋轉(zhuǎn)、文本截?cái)唷⒁绯觥⒆詣?dòng)換行、多種數(shù)據(jù)類(lèi)型、單元格分割樣式
單元格：拖放、填充柄、多選、查找和替換、定位、合并單元格、數(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)出等。

canvas-confetti

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

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

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

x-spreadsheet

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

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

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

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

QRCanvas

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

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

QRCanvas 是一個(gè)基于 canvas 的 Javascript 二維碼生成工具。其具有以下特點(diǎn)：

僅依賴(lài) canvas，兼容性好
簡(jiǎn)單，僅僅是需要一些數(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 是一個(gè)基于 Canvas 實(shí)現(xiàn)的簽名庫(kù)，用于繪制簽名。它可以在所有現(xiàn)代桌面和移動(dòng)瀏覽器中使用，不依賴(lài)于任何外部庫(kù)。Signature Pad提供了許多可自定義的選項(xiàng)，如筆畫(huà)顏色、粗細(xì)、背景色、畫(huà)布大小、簽名格式等，可以輕松實(shí)現(xiàn)不同的簽名風(fēng)格和功能。

Rough.js

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

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

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

Fabric.js

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

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

Fabric.js 是一個(gè)強(qiáng)大且簡(jiǎn)單的Javascript HTML5 Canvas庫(kù)。

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

Fabric.js能做的事情

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

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

uCharts

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

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

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

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

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

SpriteJS

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

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

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

我們知道，canvas API可以很靈活地繪制各種矢量圖形到畫(huà)布上，但是 canvas API 本身比較低級(jí)，比如我們要在畫(huà)布中央繪制一個(gè)帶有圓角的紅色矩形，使用 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()

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

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)建類(lèi)似于 DOM 的對(duì)象模型，因此我們可以像創(chuàng)建 DOM 元素一樣，創(chuàng)建 Sprite 元素，并將它們 append 到 layer 上，從而將元素呈現(xiàn)到畫(huà)布上。SpriteJS 有如下特點(diǎn)：

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

oCanvas

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

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

oCanvas是一個(gè)Javascript庫(kù)，旨在簡(jiǎn)化HTML5 Canvas的開(kāi)發(fā)。不用處理像素，而是處理對(duì)象。它非常簡(jiǎn)單明了。請(qǐng)看一下這些例子，看看它有多容易。

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

jCanvas

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

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

<canvas>元素是HTML5之外的一個(gè)新元素。它允許您在一個(gè)名為畫(huà)布的空白元素上繪制形狀、路徑、圖像和其他圖形。

創(chuàng)建畫(huà)布

在畫(huà)布上繪制之前，您需要?jiǎng)?chuàng)建一個(gè)。

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

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

附帶說(shuō)明一下，您無(wú)法通過(guò)CSS準(zhǔn)確設(shè)置畫(huà)布的寬度和高度；您只能通過(guò)canvas元素的width和height屬性來(lái)執(zhí)行此操作。

導(dǎo)入jCanvas

您還需要以某種方式將jCanvas添加到頁(yè)面中（通常使用<script>元素即可）。

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

RGraph

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

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

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