绚丽多彩的 HTML5 Canvas 2D 图形渲染引擎
可结合 AI 绘图、生成界面

快速上手
GitHub Stars 1.4k
55kB min+gzip Nice Day ~
性能出众
创建100万个可交互矩形,首屏渲染最快只需1.5秒,仅占用350MB内存。
跨多平台
可运行在手机、平板、电脑上,及Worker、Node.js、小程序。
开源生态
可渐进式集成的开源生态系统,未来会有丰富的插件、工具库、应用框架。
用户参与
LeaferJS
像素风编辑器
no-resume
不做简历
leafer-x-ruler
标尺线插件
Leafer Design
开源海报设计器
Puzzle
拼图小游戏
LeaferJS
绘制大数据表格
yugioh-card
游戏王卡片制作
leafer-signature
简易电子签名版
Leafer
插件开发教程
yugioh-card
AI图片识别
leafer-cocossd
pdf操作插件
leafer-pdf
提示框插件
Leafer Drawing Board
在线简易画板
danmaku-leafer
Canvas 弹幕
compress-text
文本压缩注音
mark-canvas
数据标注工具
LeaferJS
源码性能分析
LeaferJS
尝鲜及应用
核心优势
100
交互矩形创建
1.5
首屏渲染时长
350MB
内存占用大小
创建100万个可交互矩形的首屏渲染时长对比
LeaferJS
1.5秒
Fabric.js
13.16秒
PixiJS
14.52秒
Konva.js
46.23秒
SVG
18.57秒
HTML
15.4秒
创建100万个可交互矩形的内存占用大小对比
LeaferJS
0.34G
Fabric.js
4.74G
PixiJS
4.66G
Konva.js
6.28G
SVG
3.57G
HTML
2.45G
测试性能
测试性能
测试环境 MateBook 2022 / Chrome V112.0
我们想要打造一款可运行百万级图形的渲染引擎
易学易用

// 创建一个自适应窗口的应用,可缩放视图、拖拽矩形

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',
  draggable: true
})

leafer.add(rect)

可以做什么
在线设计
Figma - 200亿美元收购
InVision - 估值20亿美元
Canva - 估值400亿美元
在线白板
Miro - 估值175亿美元
Mural - 估值20亿美元
Microsoft Whiteboard
在线文档
Notion - 估值100亿美元
Google Docs
Microsoft Office365
无代码平台
Webflow - 估值40亿美元
Framer - B轮2400万美元
应用框架
Flutter - 移动应用框架
PixiJS - 游戏开发框架
Leafer UI - UI绘图框架
数据可视化
D3.js - 最流行的可视化库
Chart.js - 图表库
ECharts.js - 数据可视化
可以画什么
应用案例
Leafer UI
简洁、开放、现代化的 UI 绘图框架
Wodisign
流畅运行3万张设计稿的产品设计协作平台
我们的博客
我们的使命
让数字化产品开发变得更简单
像小树发芽一样不断成长,充满希望和生命力
Astro Vue Vite Vitest Vitepress TypeDoc pnpm Rollup.js Node.js skia-canvas animejs