html5canvas笔刷推举28个让你面前一亮的Canvas库

同时，愣锤将Canvas的干系资源进行的收录整理分类，更多的资源请关注Github项目地址awesome-canvas。
目前该库持续掩护中，已收录大约200+的Canvas库，以及资源网址、插件、书本、博客等资源。

图形处理库

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

html5canvas笔刷推举28个让你面前一亮的Canvas库 Bootstrap

Konva

简介：Konva是一个 HTML5 Canvas JavaScript 框架, 通过扩展 Canvas 的 2D Context 让桌面端和移动端Canvas支持交互性，使其支持高性能动画、过渡、节点嵌套、分层、过滤、缓存、事宜处理等等。
Konva官方地址（https://konvajs.org/docs/sandbox/index.html）

除上述之外，文档相对友好，但也仅仅是相对付同类库的文档友好那么一滴滴，社区有掩护一个中文文档。

fabric.js

简介： Fabric.js是一个可以轻松处理 HTML5 Canvas元素的框架，使得Canvas元素支持交互式工具模型，同时也是一个SVG-to-Canvas和Canvas-to-SVG的解析器， fabric.js官方地址（http://fabricjs.com/demos/）

fabricjs是和konva同类型但是比konva更老牌的一个的Canvas库，目前github上Star数2万+

更多示例如下图所示：

图像编辑

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

miniPaint

简介：miniPaint [官方网站在线演示]（https://viliusle.github.io/miniPaint/） - 在线版的PS。
PS这款软件大家都不陌生，web版本的如何呢？请看下图：

DarkroomJS

简介：DarkroomJS [官方网站在线演示]（https://pqina.nl/pintura/?affiliate_id=854594675） - 基于Fabricjs的浏览器端可扩展的图像编辑工具

fabric-brush

简介：fabric-brush [官方网站在线演示] （https://tennisonchan.github.io/fabric-brush/）- 基于Fabric.js的Canvas笔刷工具

fabricjs-image-editor-origin

简介：fabricjs-image-editor-origin [官方网站在线演示] （https://fabricjs-image-editor-f62330.netlify.app/）- Fabricjs图像编辑器

react-sketch

简介：react-sketch [官方网站在线演示] （http://tbolis.github.io/showcase/react-sketch/）- 基于React、Fabricjs的素描运用

glitch-canvas

简介：glitch-canvas [官方网站在线演示]（https://snorpey.github.io/jpg-glitch/） - 给画布元素添加故障效果

animockup

简介：animockup [官方网站在线演示] （https://animockup.com/）- 在浏览器中创建动画模型，并导出为视频或动画GIF

物理引擎

物理引擎利用质量、速率、摩擦力和空气阻力等变量，仿照了一个近似真实的物理系统，为刚性物体授予真实的物理效果，比如重力、旋转和碰撞等效果，让物体的行为表现的更加趋向真实。
例如，守望先锋的英雄在跳起时，系统所设置的重力参数就决定了他能跳多高，着落时的速率有多快，子弹的翱翔轨迹等等。

matter.js

简介： matter.js是一个用于 Web 的 JavaScript 2D 物理引擎库 matter.js官方地址（https://brm.io/matter-js/demo/#wreckingBall）

matter.js相较于老牌的 Box2D 引擎库更为轻量级（压缩版仅有 87 KB），并且在性能和功能方面也不逊色。

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

工业软件开拓，一贯是软件领域繁芜而又主要的一环。
其对技能人的哀求假如更高的，下面看看有哪些可以赞助我们快速开拓的库或者参考的场景吧。

gojs

简介： gojs是一款可以非常方便的开拓交互式流程图、组织构造图、设计工具、方案工具、可视化措辞的JavaScript图表库。
gojs.js官方地址（https://gojs.net/latest/）

GoJS用自定义模板和布局组件简化了节点、链接和分组。
给用户交互供应了许多前辈的功能，如拖拽、复制、粘贴、文本编辑、工具提示、高下文菜单、自动布局、模板、数据绑定和模型、事务状态和撤销管理、调色板、概述、事宜处理程序、命令和自定义操作的扩展工具系统。

文档中供应了大量的demo可供参考，基本对付常见的图编辑程序做到了全覆盖。

butterfly

简介：butterfly [官方网站在线演示] （https://butterfly-dag.gitee.io/butterfly-dag/demo/analysis）一个基于JS的数据驱动的节点式编排组件库，同时适用于React/Vue2组件。

丰富的DEMO，开箱即用全方位管理画布，开拓者只须要更专注定制化的需求利用DOM/REACT/VUE来定制元素；灵巧性，可塑性，拓展性精良供应了中文文档，这点对英文不好的小伙伴很Nice

wireflow

简介：wireflow [官方在线演示]（https://app.wireflow.co/）用户流程图实时协尴尬刁难象。

Wireflow 有超过 100 种自定义构建图形/卡可供给用，涵盖了大多数 Web 元素、交互和利用案例。
Wireflow 考虑到了协作。
您可以约请您的同事和他们一起实时设计下一个项目的用户流程。
它具有内置的实时谈天功能，让您能够与您的队友进行互换，并且在您实时协作时仍旧在同一个运用程序中。

flowy

简介：Flowy [官方在线演示]（https://alyssax.com/x/flowy） - 用于创建流程图的最小javascript库。
使创建具有流程图功能的 WebApp 成为一项非常大略的任务。
通可以在几分钟内构建自动化软件、思维导图工具或大略的编程平台。

相应式拖放、自动捕捉、自动滚动块重排、删除块、自动块居中条件捕捉、条件块移除、无依赖项

Workflow Designer

简介：Workflow Designer [官方在线示例] （https://guozhaolong.github.io/wfd/）- 基于G6和React的可视化流程编辑器。

web-pdm

简介：web-pdm [在线示例]（https://erd.zyking.xyz/demo） - 用G6做的ER图工具，终极目标是想做成在线版的powerdesigner.

X-Flowchart-Vue

简介：X-Flowchart-Vue [官方在线演示] （http://oxoyo.co/X-Flowchart-Vue/）- 基于G6和Vue的可视化图形编辑器。

OrgChart

简介：OrgChart [官方在线演示] （https://dabeng.github.io/OrgChart/）- 大略直接的组织图插件

welabx-g6

简介：welabx-g6 [官方在线示例] （https://claudewowo.github.io/welabx-g6/dist/?_blank）- 基于G6和Vue的流程图编辑器。

全景图/AR/VR

5g的遍及、虚拟现实/增强现实落地、元宇宙的火热......彷佛让Canvas再度推上了技能的顶峰。
下面让我来看看开拓这些场景常见的Canvas库吧。

Pannellum

简介：Pannellum [官方在线演示] （https://pannellum.org/）- 轻量、免费、开源的web全景查看器。

Panolens.js

简介：Panolens.js [官方在线演示] （https://pchen66.github.io/Panolens/）- Panolens.js基于Three.JS，紧张研究领域是全景、虚拟现实和潜在的增强现实。

JS-Cloudimage-360-View

简介：JS-Cloudimage-360-View [官方在线演示] （https://scaleflex.github.io/js-cloudimage-360-view/）一个大略的、交互式的资源，可以用来供应您的产品的虚拟游览。

A-Frame

简介：A-Frame [官方在线演示]（https://aframe.io/） A-Frame 除了帮助您构建 360 度媒体播放器外，它还供应了许多附加功能。
其他功能可帮助您增强网站的虚拟现实体验。

3D库

three.js

简介：three.js [官方在线演示]（https://threejs.org/examples/） - 创建易于利用、轻量级、跨浏览器的通用3d js库。
three.js就不多先容了，大家想必都很熟习。

zdog

简介：zdog [官方在线演示]（https://zzz.dog/） - 基于canvas和SVG设计师友好的伪3D引擎

seen.js

简介：seen [官方在线演示] （http://seenjs.io/）- 利用SVG或Canvas渲染3D场景。

Oimo.js

简介：Oimo.js [官方在线演示]（http://lo-th.github.io/Oimo.js/index.html#basic） - 轻量级的JS 3D物理引擎。

phoria.js

简介：phoria.js [官方在线演示]（http://www.kevs3d.co.uk/dev/phoria/index.html） - 用于在 HTML5 画布 2D 渲染器上进行大略 3D 图形和可视化的 JavaScript 库。
它不该用 WebGL。
适用于所有 HTML5 浏览器，包括桌面、iOS 和 Android。