写过画布（Canvas）交互的人都懂：从“画个矩形”到“做个能拖拽、能缩放、能编辑的画板”，中间隔着一整套事件、场景树、渲染优化和跨端适配。

你可能遇到过：

• 画布元素一多就卡，拖拽一抖，缩放更抖
• 想做编辑器（选中/框选/吸附/标尺/历史记录），最后发现要自己造半个 Figma
• Web 端能跑，换到 Web Worker / Node.js / 小程序，API 和坑全不一样

今天给你一条更省事的路：看一个“国产、中文文档、定位更偏图形交互与编辑”的 Canvas 引擎——LeaferJS。

LeaferJS 什么是

LeaferJS 是一款“好用的 Canvas 引擎”，核心目标是让你用更接近 UI 开发的方式，在 Canvas 上搭建可交互、可编辑的图形应用（例如图形编辑、小游戏、互动应用、组态软件、生成图片与短视频等）。它提供场景树、UI 绘图元素、交互事件等能力，并强调跨平台一致的运行时与 API。

• 许可：MIT

核心特性

• 易用：API 和文档强调“易学易用”，以 JavaScript / Canvas 思路构建；提供“创建应用/创建元素/事件处理”等循序教程；支持用 tag/JSON 方式组织场景树，适合做编辑器数据结构（可序列化/可回放）。
• 性能：拥有多种性能优化机制，哪怕同屏渲染十万个图形，操作起来依然像德芙一样丝般顺滑
• 跨端：同一套核心 API 覆盖多端运行环境，包括 Web、Web Worker 渲染、Node.js 渲染、以及小程序（微信）适配；并提供“跨平台核心包”和插件生态以减少端间差异。

使用场景

• 图形交互与编辑：画板/白板、流程图/连线、海报/图片编辑器、标注工具、轻量 CAD/组态界面
• UI 类画布应用：把 Canvas 当作 UI 容器来做“组件化”的交互界面（状态、过渡、手势等）
• 后端绘图/批量出图：Node.js 生成海报、证书、封面、缩略图；
• 微信小程序：需要在小程序内承载复杂画布交互

同类型对比

项目定位上手成本生态许可运行环境 LeaferJS（leafer-ui）面向“图形交互/编辑”的 Canvas 引擎中官方插件 + 社区插件仓库MITWeb、Web Worker、Node.js、小程序（微信）PixiJSWebGL/WebGPU 2D 渲染引擎（更偏渲染管线/游戏）中生态成熟MITWeb（跨设备）KonvaCanvas 2D 交互框架（事件/层/节点）低-中生态成熟MITWeb；Node.jsFabric.jsCanvas 库 + SVG/JSON I/O（更偏“画布对象模型”）中生态成熟MITWeb；Node.js

快速上手

安装：

npm install leafer-ui

最小示例（创建应用 + 画一个矩形）：

 import { Leafer, Rect } from 'leafer-ui'const leafer = new Leafer({ view: window })const rect = new Rect({  x: 100,  y: 100,  width: 100,  height: 100,  fill: '#32cd79',})leafer.add(rect)

总结

如果你做的是“图形交互/编辑”而不是纯渲染，LeaferJS 的价值在于：它把你最头痛的那部分（场景树、交互事件、编辑器能力、跨端运行时）尽量做成了可复用的引擎能力。

官网地址与开源地址

• 官网：https://www.leaferjs.com/
• GitHub：https://github.com/leaferjs/leafer-ui