寫過原生 Canvas 的朋友都懂：

• API 低級到懷疑人生——畫個帶圓角的矩形就要 20 行起步，縮放、拖拽、層級管理全靠自己實現。
• 節點一多直接 PPT——超過 5000 個元素，頁面卡成幻燈片。

於是，我們一邊掉頭髮，一邊默唸：“有沒有一款庫，寫得少、跑得快、文檔還是中文？”

什麼是 LeaferJS

LeaferJS 是一款高性能、模塊化、開源的 Canvas 2D 渲染引擎，專注於提供高性能、可交互、可縮放矢量圖形的繪圖能力。

它採用場景圖（Scene Graph）架構，支持響應式佈局、事件系統、動畫、濾鏡、遮罩、路徑、圖像、文本、滾動視圖、縮放、拖拽、節點嵌套、分組等豐富功能。

LeaferJS 的核心優勢

高效繪圖

• 生成圖片、短視頻、印刷品：支持導出 PNG、JPEG、PDF、SVG 等多種格式，滿足印刷級品質需求。
• Flex 自動佈局、中心繪製：內置 Flex 佈局，支持中心繪製，後端可批量生成圖片。
• 漸變、內外陰影、裁剪、遮罩、擦除：支持線性漸變、徑向漸變、內外陰影、裁剪、遮罩、擦除等高級繪圖功能。

UI 交互

• 開發小遊戲、互動應用、組態軟件：支持跨平台交互事件、手勢，CSS 交互狀態、光標。
• 動畫、狀態、過渡、精靈：支持幀動畫、狀態過渡、精靈圖、箭頭、連線等交互元素。

圖形編輯

• 開發裁剪、圖片、圖形編輯器：提供豐富的圖形編輯功能，高可定製。
• 標尺、視窗控制、滾動條：支持標尺、視窗控制、滾動條等編輯器必備功能。

性能巨獸

LeaferJS 最最核心的一點就是性能至上，和目前市面上比較流行的 Canvas 庫對比：

如何快速上手

# 1. 創建項目
npm create leafer@latest my-canvas
cd my-canvas
npm i
npm run dev

// 2. 寫代碼（index.ts）
import { Leafer, Rect } from 'leafer-ui'

const leafer = new Leafer({ view: window })

const rect = new Rect({
    x: 100,
    y: 100,
    width: 200,
    height: 200,
    fill: '#32cd79',
    cornerRadius: [50, 80, 0, 80],
    draggable: true
})

leafer.add(rect)

瀏覽器訪問 http://localhost:5173——圓角矩形已可拖拽！

想加 1 萬個？直接 for 循環，依舊絲滑。

使用場景

• 在線設計工具——海報、名片、電商 banner，導出 4K PDF 秒級完成。
• 數據可視化——物聯網組態、拓撲圖、百萬點折線圖，放大 20 倍依舊清晰。
• 在線白板——教學、會議、腦圖，無限畫布 + 實時協作。
• 無代碼搭建——拖拽生成頁面，JSON 一鍵轉 Canvas 應用。
• 小遊戲/動畫——跑酷、拼圖、營銷活動，幀率穩 60，包體小一半。

優秀案例展示

基於 Leafer + vue3 實現畫板。

• Github 地址：https://github.com/WHSnhcZDYRZC/drawingBoard

fly-cut 在線視頻剪輯工具。

• Github 地址：https://github.com/x007xyz/flycut

基於 LeaferJS 的貪吃蛇小遊戲。

• Github 地址：https://github.com/yh4922/leafer-greedy-snake

一款美觀且功能強大的在線設計工具，具備海報設計和圖片編輯功能，基於 leafer.js 的開源版。

• Github 地址：https://github.com/more-strive/tuhigh

更多優秀案例，可以移步官網

• 官網地址：https://www.leaferjs.com/

讓“國產”成為“首選”

LeaferJS 不是又一個“國產替代”，而是直接把 Canvas 的性能與體驗拉到 Next Level。
它讓開發者第一次敢在提案裏寫：“前端百萬節點實時交互，沒問題。”
如果你受夠了原生 Canvas 的笨拙，也踩膩了國外庫的深坑，不妨試試 LeaferJS——

• LeaferJS 官網地址：https://www.leaferjs.com/