✨ 好用的 Canvas 引擎   
快速上手
Nice ◠‿◠ Day
求助问题

AI
入门场景
高效绘图
长图、产品海报、印刷品 ...
Flex自动布局、中心绘制,后端批量生成
渐变、内外阴影、裁剪、遮罩、擦除
UI 交互
小游戏、互动应用、组态 ...
跨平台交互事件、手势,CSS交互状态、光标
动画、状态、过渡、精灵,箭头、连线
图形编辑
头像裁剪、图片、DIY编辑器 ...
丰富的图形编辑功能、高可定制
标尺、视窗控制、滚动条
在线 Playground 环境
GitHub GitHub
产品案例
Million Coffee
百万咖啡墙
截图工具 Plus
截图与美化一站式的截图插件
边框水印精灵
快速为您的照片添加水印
fig2leafer
leafer 渲染 figma 文件
Lazyva 懒画
在线设计工具(支持移动端)
简单设计
免费在线设计、图片处理工具
趣设计
PS海报头像拼图LOGO
珠串设计
微信小程序DIY精美珠串
创意表情
DIY有趣的微信表情
无界云图
可扩展的B/S图片编辑工具
Gzm Design
开源海报设计器
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 全网代码征集,让 AI 学会 LeaferJS
AI 生成内容(AIGC)正在加速改变前端开发、图形设计和交互体验。而 LeaferJS 作为一款高性能、轻量级的矢量画布引擎,正成为 AI 训练的理想选择!
作者:Leafer    2025/02/07
LeaferJS 社区提问指南
发现 Bug 或有改进建议?欢迎在 GitHub 上 提交 issue,你的贡献能让 LeaferJS 变得更强大!。我们计划训练、对接外部 AI 助手,预计 未来几个月内 上线,可自动解答 LeaferJS 相关问题。
作者:Leafer    2025/02/07
LeaferJS 试行 4 天工作制,探索更高效的开源协作
新年新气象!为了专注突破核心目标,从即日起,LeaferJS 正式试行 每周 4 天工作制(周一、周二、周四、周五),希望借此提升创造力、优化开发节奏,并吸引更多优秀的开发者加入社区。
作者:Leafer    2025/02/06
“心花怒放”:从梦境灵感到腾讯云 AI 开发黑客松的圆梦之旅
2025 年 1 月 11 日下午,我从北京飞往上海,准备参加腾讯云举办的AI开发黑客松比赛。这次活动的地点是在华东理工大学,而我则以评审老师和颁奖嘉宾的身份参与。
作者:Leafer    2025/01/23
LeaferJS 社区启动:推动 LeaferJS 像 Vue 一样在全球流行起来
Hi,大家好,我是 LeaferJS 开源引擎的创始人万超(Leafer)。我想向大家讲述一个关于梦想与努力的开源故事,并诚挚地邀请感兴趣的朋友一起来书写这个开源故事的新篇章~
作者:Leafer    2024/11/20
LeaferJS 亮相 AI 大赛,百万博主"小华"爆笑作品夺奖
2024 年程序员节,“超级码工厂”大赛隆重举行,作为创新图形渲染引擎,LeaferJS 以强大的技术实力为参赛者提供了强力支持,助力他们实现创意编程和互动设计。
作者:Leafer    2024/11/06
LeaferJS 发布全新动画、状态、过渡、游戏功能
提供丰富的动画功能,支持延时、循环和 seek。你可以用它制作关键帧动画、摇摆动画、过渡动画、路径动画和滚动动画。通过 Robot 元素,可以快速制作出具有行走和攻击动作的游戏角色。
作者:Leafer    2024/09/19
LeaferJS × Cloud Studio:好用的 Playground 环境
有没有一个在线的 Playground 环境,可以直接运行官网示例代码,分享代码片段和案例?就在我思考如何解决这个需求时,一条私信跳了出来,是腾讯 Cloud Studio 的产品负责人甘米。
作者:Leafer    2024/08/20
LeaferJS 1.0 重磅发布:好用的 Canvas 渲染引擎
大家好,我是 LeaferJS 的创始人万超。 我很高兴的向大家宣布,经过我们 3 年多开发的 LeaferJS 开源引擎终于打磨成熟,迎来了正式版的发布~
作者:Leafer    2024/07/09
♫ 绝境中盛开,一位独立开发者的故事
仔细算来,我这次在北京创业已经整整 3年了, 在这漆黑漫长的 3 年里,面对不确定性,面对资金的匮乏,我无法想像自己是怎么坚持过来的。
作者:Leafer    2024/04/08
LeaferJS 入选开源中国 2023 年度重磅官宣!
LeaferJS 是一款绚丽多彩的 HTML5 Canvas 2D 图形渲染引擎,具备瞬间创建 100 万个图形的超强能力,可结合 AI 进行绘图,生成界面。
作者:Leafer    2023/12/31
LeaferJS 引擎发布:开启绚丽多彩的数字创意世界!
欢迎来到 LeaferJS 的世界,一个激发创造力、开启无限可能的引擎!在这里,数字化产品开发不再是一项艰难的任务,而是一个令人愉悦的探索之旅。
作者:Leafer    2023/06/28
用户的评价
参与生态,协作共赢
将惠及全球 1,000万+ 开发者
我们的使命
让数字化产品开发变得更简单
愿景与文化
像小树发芽一样不断成长,充满希望和生命力
Astro Vue Vite Vitest Vitepress TypeDoc pnpm Rollup.js Node.js skia-canvas @napi-rs/canvas monaco-editor danmu.js
开源伙伴
联系我们

赞助、合作、进群

技术交流1群

技术交流2群

技术交流3群

技术交流4群

技术交流5群

技术交流6群

技术交流7群
银牌赞助
༺铜牌赞助༻