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

快速上手
GitHub Stars 1.6k
46KB min+gzip.  Nice Day ~
谁在使用
无界云图
可扩展的B/S图片编辑工具
Gzm Design
开源海报设计器
KafeJS
百万杯咖啡画布
Leafer UI
现代化的 UI 绘图框架
Wodisign
产品设计协作平台
New
期待你的产品
正式版
Step1
完善功能
修复已知问题
编辑器支持扩展
Flex自动布局
Step2
开放内容
完善、开放文档与Demo
完善、开放测试用例
用户贡献指南
Step3
常用插件
连线、吸附插件
文本编辑插件
SVG、PDF导出插件
核心优势
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
不足之处
相比 Fabric.js、Konva.js
我们的生态还不完善
插件、教程还不够多
相比 PixiJS
还不能同屏运行大量动态游戏元素
需要进行WebGPU/WebGL加速
相比 HTML、SVG
还相差甚远
需要另辟蹊径
加速计划
Step1
通用加速器
3千个复杂对象 同屏流畅交互
同屏可包含3万个子元素(总100万)
满足通用场景
Step2
专业加速器
1万个复杂对象 同屏流畅交互
同屏可包含10万个子元素(总100万)
满足专业场景
Step3
高级加速器
10万个复杂对象 同屏流畅交互
同屏可包含100万个子元素
满足大型复杂场景
百万矩形
我们想要打造一款可流畅运行百万级元素的图形引擎
易学易用

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

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)

功能特色
性能出众
创建100万个可交互矩形,首屏渲染最快只需1.5秒,仅占用350MB内存。
跨多平台
可运行在手机、平板、电脑上,及Worker、Node.js、小程序。
开源生态
可渐进式集成的开源生态系统,未来会有丰富的插件、工具库、应用框架。
可以做什么
在线设计
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 - 数据可视化
场景覆盖
Step1
高效绘图
绘制海报、插图、界面
组态、可视化数据
训练AI绘图...
Step2
图形图像编辑
海报、图片编辑器
建筑、雕刻等矢量软件
支撑专业设计软件...
Step3
网页、应用
交互状态、滚动条
自动布局、组件化、HTML互转
支撑可视化生产...
Step4
游戏、动画
WebGPU/WebGL加速
路径、变形动画
支撑可视化设计...
可以画什么
用户参与
WuJie Design
开源图片设计工具
PicFreeCutter
图片自由分割工具
NinjaQR
图片加二维码工具
ikon
图标生成工具
leafer-x-tooltip
提示框插件
LeaferJS
像素风编辑器
Leafer Design
开源海报设计器
leafer-x-ruler
标尺线插件
Puzzle
拼图小游戏
yugioh-card
游戏王卡片制作
leafer-signature
简易电子签名版
Leafer
插件开发教程
leafer-cocossd
AI图片识别
leafer-pdf
pdf操作插件
LeaferJS
绘制大数据表格
leafer-flex
flex布局插件
leafer-vue
vue3组件
Leafer
绘制动画图表
no-resume
不做简历
Leafer Drawing Board
在线简易画板
danmaku-leafer
Canvas 弹幕
compress-text
文本压缩注音
mark-canvas
数据标注工具
LeaferJS
源码性能分析
LeaferJS
尝鲜及应用
参与贡献
Step1
参与生态
开发产品、插件
开发上层框架
开发场景Demo
Step2
参与社区
传播故事、文章教程
参与 issues 答疑解惑
担任组长指导新人
Step3
参与引擎
编写文档、测试用例
翻译文档、官网
修复Bug、完善功能
小组文化
即将启动
小组可以让你结识志同道合的朋友,共同学习进步
组长需要有实际开发LeaferJS的经验, 为团队起名,带领组员成长,获得集体荣誉
未来举办活动,将由组长带队参加(10人左右)
开创者
即将开放
记录开创新公司前媒体发声者、社区贡献者、赞助者、Star的头像墙,并支持跳转链接
我们的博客
我们的使命
让数字化产品开发变得更简单
像小树发芽一样不断成长,充满希望和生命力
Astro Vue Vite Vitest Vitepress TypeDoc pnpm Rollup.js Node.js skia-canvas animejs