一款好用的 Canvas 渲染引擎,革新的体验
高效绘图、UI 交互、图形编辑

快速上手
Nice ◠‿◠ Day
入门场景
高效绘图
长图、产品海报、印刷品 ...
Flex自动布局、中心绘制,后端批量生成
渐变、内外阴影、裁剪、遮罩、擦除
UI 交互
小游戏、互动应用、组态 ...
跨平台交互事件、手势,CSS交互状态、光标
动画、状态、过渡、精灵,箭头、连线
图形编辑
头像裁剪、图片、DIY编辑器 ...
丰富的图形编辑功能、高可定制
标尺、视窗控制、滚动条
在线 Playground 环境
GitHub GitHub
产品案例
Lazyva 懒画
在线设计工具(支持移动端)
简单设计
免费在线设计、图片处理工具
珠串设计
微信小程序DIY精美珠串
无界云图
可扩展的B/S图片编辑工具
Gzm Design
开源海报设计器
KafeJS
百万杯咖啡画布
Leafer UI
现代化的 UI 绘图、交互框架
Wodisign
产品设计协作平台
New
收录完成度较高的产品
场景案例
贡献指南
Step1
参与生态
开发产品、插件
开发上层框架
开发场景示例
Step2
参与社区
传播故事、文章教程
参与 issues 答疑解惑
担任组长指导新人
Step3
参与引擎
维护文档、测试用例
翻译文档、官网
修复Bug、完善功能
用户评价
用户参与
ShotEasy
在线截图美化工具
leafer-x-tooltip-canvas
tooltip 插件
Super Mario
超级玛丽游戏
Super Mario
超级玛丽游戏-开发教程
Leafer Games
拼图小游戏 - 开发教程
Leafer Games
小游戏中心
Tuhign
在线设计工具
element-plus
UI组件
leafer-x-connector
连线功能
image-editor-core
图片设计工具 SDK
image-editor
图片设计工具
PicFreeCutter
图片分割工具
NinjaQR
图片加二维码工具
ikon
图标生成工具
leafer-x-tooltip
提示框插件
LeaferJS
像素风编辑器
no-resume
不做简历
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
绘制动画图表
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
不足之处
相比 Fabric.js、Konva.js
我们的生态还不完善
插件、教程还不够多
相比 PixiJS
还不能同屏运行大量动态游戏元素
需要进行WebGPU/WebGL加速
相比 HTML、SVG
还相差甚远
需要另辟蹊径
易学易用


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 - 数据可视化
场景覆盖
Step1
高效绘图
绘制海报、插图、界面
组态、可视化数据
训练AI绘图...
Step2
图形图像编辑
海报、图片编辑器
建筑、雕刻等矢量软件
支撑专业设计软件...
Step3
网页、应用
交互状态、滚动条
自动布局、组件化、HTML互转
支撑可视化生产...
Step4
游戏、动画
WebGPU/WebGL加速
路径、变形动画
支撑可视化设计...
可以画什么
我们的博客
LeaferJS 发布全新动画、状态、过渡、游戏功能
提供丰富的动画功能,支持延时、循环和 seek。你可以用它制作关键帧动画、摇摆动画、过渡动画、路径动画和滚动动画。通过Robot 元素,可以快速制作出具有行走和攻击动作的游戏角色。
作者:Leafer    2024/09/19
我们的使命
让数字化产品开发变得更简单
像小树发芽一样不断成长,充满希望和生命力
Astro Vue Vite Vitest Vitepress TypeDoc pnpm Rollup.js Node.js skia-canvas animejs danmu.js

加好友邀请进群

技术交流1群

技术交流2群

技术交流3群

技术交流4群

技术交流5群