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

快速上手
Nice ◠‿◠ Day
参与生态,协作共赢
入门场景
高效绘图
长图、产品海报、印刷品 ...
Flex自动布局、中心绘制,后端批量生成
渐变、内外阴影、裁剪、遮罩、擦除
UI 交互
小游戏、互动应用、组态 ...
跨平台交互事件、手势,CSS交互状态、光标
动画、状态、过渡、精灵,箭头、连线
图形编辑
头像裁剪、图片、DIY编辑器 ...
丰富的图形编辑功能、高可定制
标尺、视窗控制、滚动条
在线 Playground 环境
GitHub GitHub
产品案例
Lazyva 懒画
在线设计工具(支持移动端)
简单设计
免费在线设计、图片处理工具
珠串设计
微信小程序DIY精美珠串
无界云图
可扩展的B/S图片编辑工具
Gzm Design
开源海报设计器
KafeJS
百万杯咖啡画布
Leafer UI
现代化的 UI 绘图、交互框架
Wodisign
产品设计协作平台
场景案例
自媒体
核心优势
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 - 数据可视化
场景覆盖
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群