国产 Canvas 引擎！神器！

写过原生 Canvas 的朋友都懂：

API 低级到怀疑人生 ------画个带圆角的矩形就要 20 行起步，缩放、拖拽、层级管理全靠自己实现。
节点一多直接 PPT ------超过 5000 个元素，页面卡成幻灯片。

于是，我们一边掉头发，一边默念："有没有一款库，写得少、跑得快、文档还是中文？"

什么是 LeaferJS

LeaferJS 是一款高性能、模块化、开源的 Canvas 2D 渲染引擎 ，专注于提供高性能、可交互、可缩放矢量图形的绘图能力。

它采用场景图（Scene Graph）架构 ，支持响应式布局、事件系统、动画、滤镜、遮罩、路径、图像、文本、滚动视图、缩放、拖拽、节点嵌套、分组等丰富功能。

LeaferJS 的核心优势

高效绘图

生成图片、短视频、印刷品 ：支持导出 PNG、JPEG、PDF、SVG 等多种格式，满足印刷级品质需求。
Flex 自动布局、中心绘制 ：内置 Flex 布局，支持中心绘制，后端可批量生成图片。
渐变、内外阴影、裁剪、遮罩、擦除：支持线性渐变、径向渐变、内外阴影、裁剪、遮罩、擦除等高级绘图功能。

UI 交互

开发小游戏、互动应用、组态软件 ：支持跨平台交互事件、手势，CSS 交互状态、光标。
动画、状态、过渡、精灵：支持帧动画、状态过渡、精灵图、箭头、连线等交互元素。

图形编辑

开发裁剪、图片、图形编辑器：提供丰富的图形编辑功能，高可定制。
标尺、视窗控制、滚动条：支持标尺、视窗控制、滚动条等编辑器必备功能。

性能巨兽

LeaferJS 最最核心的一点就是性能至上，和目前市面上比较流行的 Canvas 库对比：

如何快速上手

bash 复制代码

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

ts 复制代码

// 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------圆角矩形已可拖拽！