推荐一大波让你直呼哇塞的Canvas库

目录

前言

 图形处理库

Konva

fabric.js

 图像编辑

miniPaint

DarkroomJS

fabric-brush

fabricjs-image-editor-origin

react-sketch

glitch-canvas

animockup

物理引擎

matter.js

流程图/组织图/图编辑等

gojs

butterfly

wireflow

flowy

Workflow Designer

web-pdm

X-Flowchart-Vue

OrgChart

welabx-g6

全景图/AR/VR

Pannellum

Panolens.js

JS-Cloudimage-360-View

A-Frame

 3D库

three.js

zdog

seen.js

Oimo.js

phoria.js

结尾

---

前言

Canvas技术的诞生可谓是让绘图技术如虎添翼，本文将推荐一系列Canvas图形绘制、流程图、组织图、甘特图、全景图、3D库、VR/AR、图像编辑等方面的库，希望助你在Canvas绘图时寻得一把趁手的利器。

同时，也将Canvas的相关资源进行的收录整理分类，更多的资源请关注awesome-canvas[1]，项目地址 github.com/chinaBerg/a…[2] 。目前该库持续维护中，已收录大约200+的Canvas库，以及资源网址、插件、书籍、博客等资源。

 图形处理库

图形绘制是Canvas中最基本的内容，但是Canvas本身提供的api比较基础，开发起来低效。而且也缺少完整的事件系统、区域监测、缓存等等。下面让我们来看几款高效的图形处理库吧。

Konva

简介：Konva是一个 HTML5 Canvas JavaScript 框架, 通过扩展 Canvas 的 2D Context 让桌面端和移动端Canvas支持交互性，使其支持高性能动画、过渡、节点嵌套、分层、过滤、缓存、事件处理等等。

fabric.js

简介：Fabric.js是一个可以轻松处理 HTML5 Canvas元素的框架，使得Canvas元素支持交互式对象模型，同时也是一个SVG-to-Canvas和Canvas-to-SVG的解析器 fabric.js传送门[4]

实列如下图所示：

 图像编辑

 市面上图像编辑的软件有很多，像大家所熟知的PS、sketch、axure、激萌、剪映等等。那么如果我们想开发类似的软件，有没有可以使用的库或者参考的开源软件呢？

miniPaint

简介：miniPaint - 在线版的PS。

DarkroomJS

简介：DarkroomJS - 基于Fabricjs的浏览器端可扩展的图像编辑工具

fabric-brush

简介：fabric-brush - 基于Fabric.js的Canvas笔刷工具

fabricjs-image-editor-origin

简介：fabricjs-image-editor-origin - Fabricjs图像编辑器

react-sketch

简介：react-sketch - 基于React、Fabricjs的素描应用

glitch-canvas

简介：glitch-canvas- 给画布元素添加故障效果

animockup

简介：ani