<kbd id="afajh"><form id="afajh"></form></kbd>
<strong id="afajh"><dl id="afajh"></dl></strong>
    <del id="afajh"><form id="afajh"></form></del>
        1. <th id="afajh"><progress id="afajh"></progress></th>
          <b id="afajh"><abbr id="afajh"></abbr></b>
          <th id="afajh"><progress id="afajh"></progress></th>

          發(fā)現(xiàn)了幾個(gè)賊有意思的開(kāi)源項(xiàng)目!

          共 3983字,需瀏覽 8分鐘

           ·

          2023-06-03 00:30

          在 Web 開(kāi)發(fā)中,Canvas 是一個(gè)強(qiáng)大的繪圖技術(shù),可以實(shí)現(xiàn)各種有趣的交互效果和動(dòng)態(tài)圖形。本文將盤(pán)點(diǎn) 10 個(gè)基于 Canvas 的開(kāi)源項(xiàng)目,旨在為大家提供開(kāi)發(fā)靈感和思路,以便更好地探索并應(yīng)用 Canvas 技術(shù)!

          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)型
          d81e451a33ab7f0bb33d8147dcb554a3.webp

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

          lucky-canvas

          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)端。

          1b75fca607fb70fc826cabe21de87b16.webp

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

          Excalidraw

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

          • 簡(jiǎn)單易用:具有直觀簡(jiǎn)單的界面和操作方式,用戶(hù)可以輕松創(chuàng)建和編輯圖形,并實(shí)現(xiàn)各種設(shè)計(jì)需求。
          • 實(shí)時(shí)協(xié)作:支持多人實(shí)時(shí)協(xié)作,用戶(hù)可以與其他人一起編輯和討論,在線完成協(xié)作任務(wù)。
          • 自由繪制和對(duì)象管理:提供了自由繪制、文本框、箭頭、線段、矩形、橢圓、圖標(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)行分享和保存。
          f83a0785ad87be06935de75be9a7293f.webp

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

          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):

          586160b2c0e7bfafed74b24403014a88.webpa2df99b1b18f9bee118e22c43b0900db.webp

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

          Luckysheet

          Luckysheet 是一個(gè)純前端基于 Canvas 的類(lèi)似 excel 的在線表格,功能強(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)出等。
          1f64d8c24c3ad1af512a3ce8160c2b22.webp

          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è)性化。

          77a1e53c27472c71b40395baf6cffd0b.webp

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

          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)格和功能。

          144f016821b5d9dbc6f2d766d7a07df7.webp

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

          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)行定制。

          ddf72fdb3c20a63df8ba7eee6924015e.webp

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

          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)單快捷
          ccd4bf7dff5cd8f1cd81546811c474da.webpsheet-demo.png

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

          QRCanvas

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

          • 僅依賴(lài) canvas,兼容性好
          • 簡(jiǎn)單,僅僅是需要一些數(shù)據(jù)的配置
          • 定制化功能豐富
          • 支持 Node.js
          • 方便在 React 和 Vue 中使用
          • 支持所有主流的瀏覽器

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


          歡迎學(xué)編程的朋友們加入魚(yú)皮的? 編程知識(shí)星球 ?,和上萬(wàn)名學(xué)編程的同學(xué)共享知識(shí)、交流進(jìn)步,學(xué)習(xí)原創(chuàng)項(xiàng)目并享有答疑指導(dǎo)服務(wù)。


          往期推薦

          我的學(xué)習(xí)小圈子

          代碼開(kāi)源了!

          下定決心考研了

          通過(guò) Desktop 學(xué) Docker 也太簡(jiǎn)單了

          創(chuàng)業(yè)一月半,不太習(xí)慣。。

          10 個(gè) yyds 的前端開(kāi)源項(xiàng)目!


          瀏覽 119
          點(diǎn)贊
          評(píng)論
          收藏
          分享

          手機(jī)掃一掃分享

          分享
          舉報(bào)
          評(píng)論
          圖片
          表情
          推薦
          點(diǎn)贊
          評(píng)論
          收藏
          分享

          手機(jī)掃一掃分享

          分享
          舉報(bào)
          <kbd id="afajh"><form id="afajh"></form></kbd>
          <strong id="afajh"><dl id="afajh"></dl></strong>
            <del id="afajh"><form id="afajh"></form></del>
                1. <th id="afajh"><progress id="afajh"></progress></th>
                  <b id="afajh"><abbr id="afajh"></abbr></b>
                  <th id="afajh"><progress id="afajh"></progress></th>
                  久操91| 大地99中文在线观看 | 成人娱乐中文字幕 | 久久性色| 99热激情 |