网页上要画图、做图形编辑器、在线白板、海报生成器，直接用浏览器原生的 Canvas 接口写会非常吃力。坐标、图层、缩放、拖拽、导出全都要自己管，做一个能用的编辑器动辄就是几千行代码，中间还有无数边界情况。这次整理了 4 款开源免费、可商用的网页绘图库，把这些底层能力都封装好了，给定图形和属性，拖动缩放、图层顺序、导出图片都是现成的，能省下大量开发时间。
四款库分别擅长什么
Fabric.js 把 Canvas 上的图形变成了可以操作的对象，矩形、圆形、文字、图片都能选中拖动缩放旋转，图层、编组、对齐、撤销重做、滤镜和序列化都有，很多在线图片编辑器都拿它做底子。Konva.js 走分层渲染的路线，把静态内容和频繁变化的内容分到不同图层，避免整块重绘，动画和交互性能更好，还提供 React 和 Vue 封装。Paper.js 专注矢量，贝塞尔曲线、路径布尔运算、SVG 导入导出这些硬核能力都有。Rough.js 则把手绘草图的质感做了出来，线条有自然的抖动感，填充也有斜线、交叉线这些纹样，很有辨识度。
为什么用库比自己写划算
自己用原生 Canvas 画静态图不难，难的是交互。用户拖动一个矩形，你得算鼠标位移、更新坐标、清空重绘、处理和其他图形的前后遮挡；要缩放整个画布，得处理坐标换算；要支持撤销，得自己维护历史栈。这些细节堆起来就是几千行代码和一堆边界情况。成熟的绘图库把这些都处理过了，你只需要关心业务逻辑，比如用户选中图形后显示什么面板、导出什么尺寸的图片，开发效率完全不是一个量级。
实际用起来要注意什么
一是坐标和缩放别混。画布本身有缩放比例，用户操作时拿到的是屏幕坐标，存进数据里的应该是画布坐标，两者不做换算，放大之后元素位置就会乱。二是导出图片的清晰度要提前想清楚，Canvas 导出默认按 CSS 像素走，要出高清图得按倍率放大画布尺寸再画一遍，否则用户下载的图放到手机上就是糊的。三是元素一多会明显卡顿，尤其是频繁重绘的场景，该分层的分层、该缓存的缓存，别让浏览器一帧重画几千个对象。
包内容和用法
压缩包里按库名分成了四个目录，每个目录里放了压缩版和带注释的非压缩版两种文件，正式项目引 min 版，调试的时候看非压缩版。四款库互相独立、不依赖任何框架，用 script 标签引入就能拿到全局对象，也支持模块化引入。选型上按需求挑，要做可编辑的图形编辑器选 Fabric.js，要画布动画和高性能渲染选 Konva.js，要做矢量路径和 SVG 选 Paper.js，要手绘风格选 Rough.js。它们还能组合，比如用 Rough.js 生成手绘图形再交给 Fabric.js 管理。每个目录都附带了说明文档和许可文件。
绘图库这类资源属于用一次省一大截的类型，尤其做海报生成、在线设计、图片标注这些产品，底层用它比自己造轮子靠谱得多。上手建议先从一个小 demo 开始，画几个图形试试拖动和缩放，把坐标换算这一步走通，后面加功能就顺了。这四款加起来不到一兆，按需引入基本不占体积，全部可免费商用、修改和再分发，保留各自的许可文件即可。后面还会继续整理前端开发常用的组件和工具合集，需要的可以先收藏。
暂无评论内容