konvajs/konva

这是什么？

核心功能

• 01场景图模型，每个图形都有独立的事件和拖拽行为。
• 02基于 HTML5 Canvas 的变换、动画和分层渲染。
• 03支持导出舞台和图形，并可缓存复杂节点。
• 04提供 React、Vue、Svelte 和 Angular 的官方封装包。
• 05模块化构建，可只引入所需的图形和滤镜。
• 06可通过 node-canvas 或 skia-canvas 在 Node.js 中进行服务端渲染。

适用场景

• 构建浏览器内可选中、可变换对象的设计或图片编辑器。
• 在图片上实现协作白板或标注工具。
• 绘制可拖拽节点的交互式图表、流程图或地图。
• 在 Node.js 服务端根据 Canvas 绘图生成图片。

快速上手

1. 1

   从 npm 安装 Konva

   npm install konva
2. 2

   在项目中导入 Konva，并创建舞台、图层和图形

3. 3

   若需在 Node.js 中服务端渲染，还需安装一个 canvas 后端

   npm install konva canvas

使用前须知

• !在 Node.js 中渲染需要手动安装单独的 canvas 或 skia-canvas 包。
• !DOM 事件仅在浏览器中可用，canvas 功能支持取决于所选后端。

收录于专题

标签

常见问题

konva 是什么？

基于 HTML5 Canvas 的 JavaScript 框架，用于构建交互式 2D 图形、设计编辑器、白板和图表。 Konva 是一个面向 JavaScript 和 TypeScript 的 2D Canvas 框架。它采用场景图（scene graph）模型，每个图形都是独立对象，拥有自己的事件、拖拽行为、变换、动画、缓存和导出能力，无需开发者手动逐帧重绘像素。

konva 可以免费使用吗？用的什么许可证？

konva 以 Other 许可证开源。用于商业产品前，请先确认许可证条款。

konva 还在维护吗？

活跃维护中。konva 最近一次提交是在 2026年11月5日。

konva 适合用来做什么？

构建浏览器内可选中、可变换对象的设计或图片编辑器。 在图片上实现协作白板或标注工具。 绘制可拖拽节点的交互式图表、流程图或地图。 在 Node.js 服务端根据 Canvas 绘图生成图片。

konva 怎么安装和运行？

从 npm 安装 Konva: npm install konva 在项目中导入 Konva，并创建舞台、图层和图形 若需在 Node.js 中服务端渲染，还需安装一个 canvas 后端: npm install konva canvas

在哪里获取 konva？

源代码和安装说明在 GitHub 上：https://github.com/konvajs/konva