├── LICENSE ├── README-EN.md ├── README.md └── assets └── logo.png /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2021 刺刀 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README-EN.md: -------------------------------------------------------------------------------- 1 | ![](./assets/logo.png) 2 | ## awesome-canvas 3 | List of awesome HTML5 Canvas with libraries, plugins, examples, course, books and related articles. 4 | 5 | ## Summary 6 | - [awesome-canvas](#awesome-canvas) 7 | - [Summary](#summary) 8 | - [Tutorials](#tutorials) 9 | - [Books](#books) 10 | - [Libraries](#libraries) 11 | - [Canvas draw](#canvas-draw) 12 | - [3D libraries](#3d-libraries) 13 | - [VR/AR](#vrar) 14 | - [Physics engine](#physics-engine) 15 | - [Game engine](#game-engine) 16 | - [Flowchart](#flowchart) 17 | - [Gantt](#gantt) 18 | - [Organization charts](#organization-charts) 19 | - [UML](#uml) 20 | - [Graph Editing](#graph-editing) 21 | - [Spreadsheet](#spreadsheet) 22 | - [Charts Libraries](#charts-libraries) 23 | - [Poster and Screenshot](#poster-and-screenshot) 24 | - [Data processing](#data-processing) 25 | - [Image processing](#image-processing) 26 | - [Image filters](#image-filters) 27 | - [Drawingboard](#drawingboard) 28 | - [Signature pad](#signature-pad) 29 | - [Waveforms animation](#waveforms-animation) 30 | - [Particle animation](#particle-animation) 31 | - [Path animation](#path-animation) 32 | - [Audio Video](#audio-video) 33 | - [cursor](#cursor) 34 | - [Creativity](#creativity) 35 | - [QR code](#qr-code) 36 | - [Verification code](#verification-code) 37 | - [Runtime](#runtime) 38 | - [Others](#others) 39 | - [Resources Website](#resources-website) 40 | - [Plugins](#plugins) 41 | - [Articles](#articles) 42 | - [Contributor](#contributor) 43 | - [License](#license) 44 | 45 | ## Tutorials 46 | - [Draw on the Web](https://airingursb.gitbooks.io/canvas/content/) 47 | - [The Aesthetics of Graph Visualization](https://www.researchgate.net/publication/220795329_The_Aesthetics_of_Graph_Visualization) 48 | - [Computer Graphics And Visualization](https://ng-tech.icu/CGDataVis-Series/#/) 49 | - [Mozilla Developer Network Canvas Tutorial](https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API) 50 | - [Internet Explorer 9 Guide for Developers: HTML5 canvas element](https://docs.microsoft.com/en-us/previous-versions/hh410106(v=msdn.10)?redirectedfrom=MSDN#_HTML5_canvas) 51 | - [The canvas element in the HTML5 draft standard](https://html.spec.whatwg.org/multipage/canvas.html#the-canvas-element) 52 | - [HTML5 Canvas — the Basics](https://dev.opera.com/articles/html5-canvas-basics/) 53 | - [HTML5 Canvas - RUNOOB Tutorial](https://www.runoob.com/html/html5-canvas.html) 54 | - [HTML5 Canvas - W3school Tutorial](https://www.w3school.com.cn/html/html5_canvas.asp) 55 | - [HTML5 Canvas - 廖雪峰 Tutorial](https://www.liaoxuefeng.com/wiki/1022910821149312/1023022423592576) 56 | - [HTML5 Canvas - IMOOC Tutorial](https://www.imooc.com/wiki/html5/canvas.html) 57 | - [The Chinese series of learning tutorials of HTML5 canvas](https://github.com/827652549/CanvasStudy) 58 | - [AntV Graphin - Graph Database White Paper](https://graphin.antv.vision/solution/database/graph-database) 59 | - [AntV Graphin - Knowledge Graph White Paper](https://graphin.antv.vision/solution/knowledge-graph) 60 | - [AntV Graphin - Network Security White Paper](https://graphin.antv.vision/solution/security) 61 | - [AntV Graphin - Enterprise Risk Control White Paper](https://graphin.antv.vision/solution/enterprise/enterprise-risk-control) 62 | 63 | ## Books 64 | - 《[HTML5 Canvas开发详解](http://product.dangdang.com/11012245144.html)》 Author: Steve Fulton, Jeff Fulton [Link🔗](http://product.dangdang.com/11012245144.html) 65 | - 《[TypeScript图形渲染实战：2D架构设计与实现](http://product.dangdang.com/28499406.html)》 Author: 步磊峰 [Link🔗](http://product.dangdang.com/28499406.html) 66 | - 《[HTML5 Canvas核心技术：图形、动画与游戏开发](https://item.jd.com/11312007.html?cu=true&utm_source=kong&utm_medium=tuiguang&utm_campaign=t_1001542270_53285100_0_1932113745&utm_term=2f9a0a9984c64a1983d8e5eff928839a)》 Author: David Geary 67 | - 《[HTML5 2D游戏编程核心技术](https://item.jd.com/25570817493.html?cu=true&utm_source=kong&utm_medium=tuiguang&utm_campaign=t_1001542270_53285100_0_1932113745&utm_term=ea99fc143d004c78b5b3bd12381b357e)》 Author: David Geary 68 | - 《[HTML5 Canvas游戏开发实战](http://e.dangdang.com/products/1900396102.html)》 Author: 张路斌 [Link🔗](http://e.dangdang.com/products/1900396102.html) 69 | - 《[从0到1 HTML5 Canvas动画开发](http://product.dangdang.com/28549249.html)》 Author: 莫振杰 [Link🔗](http://product.dangdang.com/28549249.html) 70 | - 《[HTML5 Canvas核心技术: 图形、动画与游戏开发](http://product.dangdang.com/1798930436.html)》 Author: Geary [Link🔗](http://product.dangdang.com/1798930436.html) 71 | - 《[D3 for impatient: interactive Graphics for Programmers and Scientists](http://product.dangdang.com/28556039.html)》 Author: Philipp K. Janert [Link🔗](http://product.dangdang.com/28556039.html) 72 | - 《[如何使用 Canvas 制作出炫酷的网页背景特效](https://juejin.cn/book/6844723714655780871)》 Author: sunshine小小倩 [Link🔗](https://juejin.cn/book/6844723714655780871) 73 | - 《[可视化入门：从 0 到 1 开发一个图表库](https://juejin.cn/book/7031893648145186824)》 Author: AntV [Link🔗](https://juejin.cn/book/7031893648145186824) 74 | - 《[Graph Analysis and Visualization](https://book.douban.com/subject/26756024/)》 Author: Richard Brath / David Jonker [Link🔗](https://book.douban.com/subject/26756024/) 75 | - 《[Visual Complexity: Mapping Patterns of Information](https://book.douban.com/subject/25665238/)》 Author: Manuel Lima [Link🔗](https://book.douban.com/subject/25665238/) 76 | - 《[Data visualization](https://book.douban.com/subject/25760272/)》 Author: 陈为 / 沈则潜 [Link🔗](https://book.douban.com/subject/25760272/) 77 | - 《[从0-1入门数据可视化](https://wzf1997.github.io/learn-visualization/blog/three/3dearth.html)》 Author: Fly 78 | 79 | ## Libraries 80 | ### Canvas draw 81 | - [fabric.js](http://fabricjs.com/) [[Online Demo](http://fabricjs.com/demos/)] - Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser. ![](https://img.shields.io/github/stars/fabricjs/fabric.js?style=social) ![](https://img.shields.io/github/forks/fabricjs/fabric.js?style=social) 82 | - [DarkroomJS](https://github.com/MattKetmo/darkroomjs) [[Online Demo](https://pqina.nl/pintura/?affiliate_id=854594675)] - Extensible image editing tool in your browser. ![](https://img.shields.io/github/stars/MattKetmo/darkroomjs?style=social) ![](https://img.shields.io/github/forks/MattKetmo/darkroomjs?style=social) 83 | - [react-design-editor](https://github.com/salgum1114/react-design-editor) [[Online Demo](https://salgum1114.github.io/react-design-editor/)] - React Design Editor has started to developed direct manipulation of editable design tools like Powerpoint, We've developed it with reactjs, ant.design, fabricjs. ![](https://img.shields.io/github/stars/salgum1114/react-design-editor?style=social) ![](https://img.shields.io/github/forks/salgum1114/react-design-editor?style=social) 84 | - [react-sketch](https://github.com/tbolis/react-sketch) [[Online Demo](http://tbolis.github.io/showcase/react-sketch/)] - Sketch Tool for React-based applications, backed up by FabricJS. ![](https://img.shields.io/github/stars/tbolis/react-sketch?style=social) ![](https://img.shields.io/github/forks/tbolis/react-sketch?style=social) 85 | - [vue-fabric](https://github.com/purestart/vue-fabric) - Vue fabric component created based on canvas fabric.js library, customized drawing board, picture combination drawing. ![](https://img.shields.io/github/stars/purestart/vue-fabric?style=social) ![](https://img.shields.io/github/forks/purestart/vue-fabric?style=social) 86 | - [angular-fabric](https://github.com/michaeljcalkins/angular-fabric) [[Online Demo](https://codepen.io/michaeljcalkins/full/Imupw)] - Control a FabricJS canvas with AngularJS. ![](https://img.shields.io/github/stars/michaeljcalkins/angular-fabric?style=social) ![](https://img.shields.io/github/forks/michaeljcalkins/angular-fabric?style=social) 87 | - [fabric-js-editor](https://github.com/danielktaylor/fabric-js-editor) - An HTML5 vector image editor built with Fabric.js. ![](https://img.shields.io/github/stars/danielktaylor/fabric-js-editor?style=social) ![](https://img.shields.io/github/forks/danielktaylor/fabric-js-editor?style=social) 88 | - [fabric-brush](https://github.com/tennisonchan/fabric-brush) [[Online Demo](https://tennisonchan.github.io/fabric-brush/)] - Crayon is a canvas brush based on an awesome framework Fabric.js. ![](https://img.shields.io/github/stars/tennisonchan/fabric-brush?style=social) ![](https://img.shields.io/github/forks/tennisonchan/fabric-brush?style=social) 89 | - [fabricjs-image-editor-origin](https://github.com/pegasus1982/fabricjs-image-editor-origin) [[Online Demo](https://fabricjs-image-editor-f62330.netlify.app/)] - fabric.js javascript image editor. ![](https://img.shields.io/github/stars/pegasus1982/fabricjs-image-editor-origin?style=social) ![](https://img.shields.io/github/forks/pegasus1982/fabricjs-image-editor-origin?style=social) 90 | - [DrawerJs](https://github.com/carstenschaefer/DrawerJs) [[Online Demo](https://carstenschaefer.github.io/DrawerJs/examples/standalone/)] - A customizable WYSIWYG HTML canvas editor. ![](https://img.shields.io/github/stars/carstenschaefer/DrawerJs?style=social) ![](https://img.shields.io/github/forks/carstenschaefer/DrawerJs?style=social) 91 | - [myvision](https://github.com/OvidijusParsiunas/myvision) - Computer vision based ML training data generation tool 🚀. ![](https://img.shields.io/github/stars/OvidijusParsiunas/myvision?style=social) ![](https://img.shields.io/github/forks/OvidijusParsiunas/myvision?style=social) 92 | - [konva](https://konvajs.org/) [[Online Demo](https://konvajs.org/docs/sandbox/index.html)] - Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications. ![](https://img.shields.io/github/stars/konvajs/konva?style=social) ![](https://img.shields.io/github/forks/konvajs/konva?style=social) 93 | - [konva Chinese Docs](http://konvajs-doc.bluehymn.com/docs/) 94 | - [react-konva](https://konvajs.org/) [[Online Demo](https://codesandbox.io/s/5m3nwp787x)] - React + Canvas = Love. JavaScript library for drawing complex canvas graphics using React. ![](https://img.shields.io/github/stars/konvajs/react-konva?style=social) ![](https://img.shields.io/github/forks/konvajs/react-konva?style=social) 95 | - [vue-konva](https://github.com/konvajs/vue-konva) - Vue & Canvas - JavaScript library for drawing complex canvas graphics using Vue. ![](https://img.shields.io/github/stars/konvajs/vue-konva?style=social) ![](https://img.shields.io/github/forks/konvajs/vue-konva?style=social) 96 | - [react-proto](https://github.com/React-Proto/react-proto) - 🎨 React application prototyping tool for developers and designers 🏗️. ![](https://img.shields.io/github/stars/React-Proto/react-proto?style=social) ![](https://img.shields.io/github/forks/React-Proto/react-proto?style=social) 97 | - [two.js](https://two.js.org/#introduction) [[Online Demo](https://two.js.org/examples/)] - A renderer agnostic two-dimensional drawing api for the web. ![](https://img.shields.io/github/stars/jonobr1/two.js?style=social) ![](https://img.shields.io/github/forks/jonobr1/two.js?style=social) 98 | - [EaselJS](https://www.createjs.com/getting-started/easeljs) - The Easel Javascript library provides a full, hierarchical display list, a core interaction model, and helper classes to make working with the HTML5 Canvas element much easier. ![](https://img.shields.io/github/stars/CreateJS/EaselJS?style=social) ![](https://img.shields.io/github/forks/CreateJS/EaselJS?style=social) 99 | - [spritejs](https://spritejs.org/#/) [[Online Demo](https://spritejs.org/demo/)] - A cross platform high-performance graphics system. ![](https://img.shields.io/github/stars/spritejs/spritejs?style=social) ![](https://img.shields.io/github/forks/spritejs/spritejs?style=social) 100 | - [concretejs](http://www.concretejs.com/) [[Online Demo](http://www.concretejs.com/#examples)]- A lightweight Html5 Canvas framework that enables hit detection, layer support, pixel ratio management, exports, and downloads. ![](https://img.shields.io/github/stars/ericdrowell/concrete?style=social) 101 | - [cax](https://github.com/dntzhang/cax/blob/master/README.CN.md) [[Online Demo](https://github.com/dntzhang/cax/blob/master/README.CN.md)] - HTML5 Canvas 2D Rendering Engine. ![](https://img.shields.io/github/stars/dntzhang/cax?style=social) ![](https://img.shields.io/github/forks/dntzhang/cax?style=social) 102 | - [wxDraw](https://bobiscool.github.io/wxDrawDocs/#/) [[Online Demo](https://github.com/bobiscool/wxDraw#wxdraw%E5%88%9B%E4%BD%9C%E7%9A%84%E5%8A%A8%E7%94%BB%E6%BC%94%E7%A4%BA)] - A lightweight canvas library which providing 2d draw for weapp. ![](https://img.shields.io/github/stars/bobiscool/wxDraw?style=social) ![](https://img.shields.io/github/forks/bobiscool/wxDraw?style=social) 103 | - [atrament.js](https://github.com/jakubfiala/atrament.js) - A small JS library for beautiful drawing and handwriting on the HTML Canvas. ![](https://img.shields.io/github/stars/jakubfiala/atrament.js?style=social) ![](https://img.shields.io/github/forks/jakubfiala/atrament.js?style=social) 104 | - [origami.js](https://raphamorim.io/origamijs/docs/) - Powerful and Lightweight Library to create using HTML5 Canvas. ![](https://img.shields.io/github/stars/raphamorim/origami.js?style=social) ![](https://img.shields.io/github/forks/raphamorim/origami.js?style=social) 105 | - [react-native-sketch-canvas](https://github.com/terrylinla/react-native-sketch-canvas) [[Online Demo]()] - A React Native component for drawing by touching on both iOS and Android. ![](https://img.shields.io/github/stars/terrylinla/react-native-sketch-canvas?style=social) ![](https://img.shields.io/github/forks/terrylinla/react-native-sketch-canvas?style=social) 106 | - [mesh.js](https://github.com/mesh-js/mesh.js) [[Online Demo](https://meshjs.webgl.group/demo/#/docs/index)] - A graphics system born for visualization. ![](https://img.shields.io/github/stars/mesh-js/mesh.js?style=social) ![](https://img.shields.io/github/forks/mesh-js/mesh.js?style=social) 107 | - [taro-plugin-canvas](https://github.com/chuyun/taro-plugin-canvas) - Canvas component for wechat miniapp based on taro, Generate shared pictures through configuration. ![](https://img.shields.io/github/stars/chuyun/taro-plugin-canvas?style=social) ![](https://img.shields.io/github/forks/chuyun/taro-plugin-canvas?style=social) 108 | - [pencil.js](https://github.com/pencil-js/pencil.js) [[Online Demo](https://pencil.js.org/)] - ✏️ Nice modular interactive 2D drawing library. ![](https://img.shields.io/github/stars/pencil-js/pencil.js?style=social) ![](https://img.shields.io/github/forks/pencil-js/pencil.js?style=social) 109 | - [p5.js]( https://github.com/processing/p5.js) [[Online Demo](https://p5js.org/zh-Hans/examples/)] - JS client-side library for creating graphic and interactive experiences. ![](https://img.shields.io/github/stars/processing/p5.js?style=social) ![](https://img.shields.io/github/forks/processing/p5.js?style=social) 110 | ### 3D libraries 111 | - [three.js](https://github.com/mrdoob/three.js) [[Online Demo](https://threejs.org/examples/)] - JavaScript 3D Library. ![](https://img.shields.io/github/stars/mrdoob/three.js?style=social) ![](https://img.shields.io/github/forks/mrdoob/three.js?style=social) 112 | - [zdog](https://github.com/metafizzy/zdog) [[Online Demo](https://zzz.dog/)] - Flat, round, designer-friendly pseudo-3D engine for canvas & SVG ![](https://img.shields.io/github/stars/metafizzy/zdog?style=social) ![](https://img.shields.io/github/forks/metafizzy/zdog?style=social) 113 | - [curtainsjs](https://www.curtainsjs.com/get-started.html) [[Online Demo](https://www.curtainsjs.com/get-started.html#basic-setup)] - curtains.js is a lightweight vanilla WebGL javascript library that turns HTML DOM elements into interactive textured planes. ![](https://img.shields.io/github/stars/martinlaxenaire/curtainsjs?style=social) ![](https://img.shields.io/github/forks/martinlaxenaire/curtainsjs?style=social) 114 | - [obelisk.js](https://github.com/nosir/obelisk.js) - Build pixel isometric graphics with HTML5 canvas ![](https://img.shields.io/github/stars/nosir/obelisk.js?style=social) ![](https://img.shields.io/github/forks/nosir/obelisk.js?style=social) 115 | - [seen](http://seenjs.io/) [[Online Demo](http://seenjs.io/demo-simple-interactive.html)] - Render 3D scenes into SVG or HTML5 Canvas. ![](https://img.shields.io/github/stars/themadcreator/seen?style=social) ![](https://img.shields.io/github/forks/themadcreator/seen?style=social) 116 | - [Oimo.js](https://github.com/lo-th/Oimo.js) [[Online Demo](http://lo-th.github.io/Oimo.js/index.html#basic)] - Lightweight 3d physics engine for javascript. ![](https://img.shields.io/github/stars/lo-th/Oimo.js?style=social) ![](https://img.shields.io/github/forks/lo-th/Oimo.js?style=social) 117 | - [troika](https://protectwise.github.io/troika/) [[Online Demo]()] - A JavaScript framework for interactive 3D and 2D visualizations. ![](https://img.shields.io/github/stars/protectwise/troika?style=social) ![](https://img.shields.io/github/forks/protectwise/troika?style=social) 118 | - [phoria.js](https://github.com/kevinroast/phoria.js) [[Online Demo](http://www.kevs3d.co.uk/dev/phoria/index.html)] - JavaScript library for simple 3D graphics and visualisation on a HTML5 canvas 2D renderer. It does not use WebGL. Works on all HTML5 browsers, including desktop, iOS and Android. ![](https://img.shields.io/github/stars/kevinroast/phoria.js?style=social) ![](https://img.shields.io/github/forks/kevinroast/phoria.js?style=social) 119 | - [isomer](https://github.com/jdan/isomer) [[Online Demo](http://jdan.github.io/isomer/)] - Simple isometric graphics library for HTML5 canvas. ![](https://img.shields.io/github/stars/jdan/isomer?style=social) ![](https://img.shields.io/github/forks/jdan/isomer?style=social) 120 | 121 | ### VR/AR 122 | - [Panolens.js](https://github.com/pchen66/panolens.js) [[Online Demo](https://pchen66.github.io/Panolens/)] - Javascript panorama viewer based on Three.js ![](https://img.shields.io/github/stars/pchen66/panolens.js?style=social) ![](https://img.shields.io/github/forks/pchen66/panolens.js?style=social) 123 | - [Pannellum](https://github.com/mpetroff/pannellum) [[Online Demo](https://pannellum.org/)] - Pannellum is a lightweight, free, and open source panorama viewer for the web. ![](https://img.shields.io/github/stars/mpetroff/pannellum?style=social) ![](https://img.shields.io/github/forks/mpetroff/pannellum?style=social) 124 | - [Marzipano](https://github.com/google/marzipano) [[Online Demo](https://www.marzipano.net/demos/sample-tour/)] A 360° media viewer for the modern web. ![](https://img.shields.io/github/stars/google/marzipano?style=social) ![](https://img.shields.io/github/forks/google/marzipano?style=social) 125 | - [JS-Cloudimage-360-View](https://github.com/scaleflex/js-cloudimage-360-view) [[Online Demo](https://scaleflex.github.io/js-cloudimage-360-view/)] Engage your customers with a stunning 360 view of your products. ![](https://img.shields.io/github/stars/scaleflex/js-cloudimage-360-view?style=social) ![](https://img.shields.io/github/forks/scaleflex/js-cloudimage-360-view?style=social) 126 | - [A-Frame](https://github.com/aframevr/aframe) [[Online Demo](https://aframe.io/)] 🅰️ web framework for building virtual reality experiences. ![](https://img.shields.io/github/stars/aframevr/aframe?style=social) ![](https://img.shields.io/github/forks/aframevr/aframe?style=social) 127 | - [exokit](https://github.com/exokitxr/exokit) [[Online Demo](https://exokit.org/)] - Native VR/AR/XR engine for JavaScript 🦖 ![](https://img.shields.io/github/stars/exokitxr/exokit?style=social) ![](https://img.shields.io/github/forks/exokitxr/exokit?style=social) 128 | - [webvr-boilerplate](https://github.com/borismus/webvr-boilerplate) [[Online Demo](https://borismus.github.io/webvr-boilerplate/#)] - A starting point for web-based VR experiences that work on all VR headsets. ![](https://img.shields.io/github/stars/borismus/webvr-boilerplate?style=social) ![](https://img.shields.io/github/forks/borismus/webvr-boilerplate?style=social) 129 | 130 | ### Physics engine 131 | - [matter-js](https://brm.io/matter-js/) [[Online Demo](https://brm.io/matter-js/demo/#mixed)] - a 2D rigid body physics engine for the web ▲● ■ ![](https://img.shields.io/github/stars/liabru/matter-js?style=social) ![](https://img.shields.io/github/forks/liabru/matter-js?style=social) 132 | - [box2d.js](https://github.com/kripken/box2d.js) [[Online Demo](http://kripken.github.io/box2d.js/demo/webgl/box2d.html)] - Port of Box2D to JavaScript using Emscripten. ![](https://img.shields.io/github/stars/kripken/box2d.js?style=social) ![](https://img.shields.io/github/forks/kripken/box2d.js?style=social) 133 | - [p2.js](https://github.com/schteppe/p2.js) [[Online Demo](http://schteppe.github.io/p2.js/demos/springs.html)] - JavaScript 2D physics library. ![](https://img.shields.io/github/stars/schteppe/p2.js?style=social) ![](https://img.shields.io/github/forks/schteppe/p2.js?style=social) 134 | - [planck.js](https://github.com/shakiba/planck.js) [[Online Demo](https://piqnt.com/planck.js/)] - 2D JavaScript Physics Engine. ![](https://img.shields.io/github/stars/shakiba/planck.js?style=social) ![](https://img.shields.io/github/forks/shakiba/planck.js?style=social) 135 | 136 | ### Game engine 137 | - [Hilo](https://github.com/hiloteam/Hilo/blob/dev/README_ZH.md) [[Online Demo](https://hiloteam.github.io/examples/index.html)] - A Cross-end HTML5 Game development solution developed by Alibaba Group. ![](https://img.shields.io/github/stars/hiloteam/Hilo?style=social) ![](https://img.shields.io/github/forks/hiloteam/Hilo?style=social) 138 | - [melonJS](https://melonjs.org/) [[Online Demo](https://www.melongaming.com/)] - a fresh & lightweight javascript game engine. ![](https://img.shields.io/github/stars/melonjs/melonJS?style=social) ![](https://img.shields.io/github/forks/melonjs/melonJS?style=social) 139 | - [Babylon.js](https://github.com/BabylonJS/Babylon.js) [[Online Demo](https://www.babylonjs.com/community/)] - Babylon.js is a powerful, beautiful, simple, and open game and rendering engine packed into a friendly JavaScript framework. ![](https://img.shields.io/github/stars/BabylonJS/Babylon.js?style=social) ![](https://img.shields.io/github/forks/BabylonJS/Babylon.js?style=social) 140 | - [taro](https://github.com/Cloud9c/taro) [[Online Demo](https://www.echou.xyz/taro/examples/#Cube)] - A lightweight 3D game engine for the web. ![](https://img.shields.io/github/stars/Cloud9c/taro?style=social) ![](https://img.shields.io/github/forks/Cloud9c/taro?style=social) 141 | - [turbulenz_engine](https://github.com/turbulenz/turbulenz_engine) [[Online Demo](http://biz.turbulenz.com/samples)] - Turbulenz is a modular 3D and 2D game framework for making HTML5 powered games for browsers, desktops and mobile devices. ![](https://img.shields.io/github/stars/turbulenz/turbulenz_engine?style=social) ![](https://img.shields.io/github/forks/turbulenz/turbulenz_engine?style=social) 142 | - [eva.js](https://github.com/eva-engine/eva.js) [[Online Demo](https://eva.js.org/playground/#/resource)] - Eva.js is a front-end game engine specifically for creating interactive game projects. ![](https://img.shields.io/github/stars/eva-engine/eva.js?style=social) ![](https://img.shields.io/github/forks/eva-engine/eva.js?style=social) 143 | - [PlayCanvas](https://github.com/playcanvas/engine) [[Online Demo](https://playcanvas.github.io/#/)] - Fast and lightweight JavaScript game engine built on WebGL and glTF ![](https://img.shields.io/github/stars/playcanvas/engine?style=social) ![](https://img.shields.io/github/forks/playcanvas/engine?style=social) 144 | - [Sketchbook](https://github.com/swift502/Sketchbook) [[Online Demo](https://jblaha.art/sketchbook/0.4/)] - 3D playground built on three.js and cannon.js ![](https://img.shields.io/github/stars/swift502/Sketchbook?style=social) ![](https://img.shields.io/github/forks/swift502/Sketchbook?style=social) 145 | - [Sein.js](https://github.com/hiloteam/Sein.js) [[Online Demo](https://seinjs.com/cn/example/start/start)]- Progressive web 3D game engine. ![](https://img.shields.io/github/stars/hiloteam/Sein.js?style=social) ![](https://img.shields.io/github/forks/hiloteam/Sein.js?style=social) 146 | - [PuzzleScript](https://github.com/increpare/PuzzleScript) [[Online Demo](https://www.puzzlescript.net/)] - Open Source HTML5 Puzzle Game Engine ![](https://img.shields.io/github/stars/increpare/PuzzleScript?style=social) ![](https://img.shields.io/github/forks/increpare/PuzzleScript?style=social) 147 | - [LittleJS](https://github.com/KilledByAPixel/LittleJS) [[Online Demo](https://killedbyapixel.github.io/LittleJS/examples/puzzle/)] - The Tiny JavaScript Game Engine That Can! 🚂 ![](https://img.shields.io/github/stars/KilledByAPixel/LittleJS?style=social) ![](https://img.shields.io/github/forks/KilledByAPixel/LittleJS?style=social) 148 | - [Black](https://github.com/MassiveHeights/Black) [[Online Demo](https://blacksmith2d.io/Docs/Examples)] - World's fastest HTML5 2D game engine 🛸 ![](https://img.shields.io/github/stars/MassiveHeights/Black?style=social) ![](https://img.shields.io/github/forks/MassiveHeights/Black?style=social) 149 | - [stage.js](https://github.com/shakiba/stage.js) [[Online Demo](https://piqnt.com/stage.js/)] - 2D HTML5 rendering and layout engine for game development. ![](https://img.shields.io/github/stars/shakiba/stage.js?style=social) ![](https://img.shields.io/github/forks/shakiba/stage.js?style=social) 150 | - [pixijs](https://github.com/pixijs/pixijs) [[Online Demo](https://www.goodboydigital.com/pixijs/storm/?base=pixijs&category=storm)] - The HTML5 Creation Engine: Create beautiful digital content with the fastest, most flexible 2D WebGL renderer. ![](https://img.shields.io/github/stars/pixijs/pixijs?style=social) ![](https://img.shields.io/github/forks/pixijs/pixijs?style=social) 151 | - [Excalibur](https://github.com/excaliburjs/Excalibur) [[Online Demo](https://excaliburjs.com/samples/)] - 🎮 An easy to use 2D HTML5 game engine written in TypeScript. ![](https://img.shields.io/github/stars/excaliburjs/Excalibur?style=social) ![](https://img.shields.io/github/forks/excaliburjs/Excalibur?style=social) 152 | - [Akihabara](https://github.com/kesiev/akihabara) [[Online Demo](http://www.kesiev.com/akihabara/)] - About 153 | A game engine for making classic arcade style games using Javascript and HTML5. ![](https://img.shields.io/github/stars/kesiev/akihabara?style=social) ![](https://img.shields.io/github/forks/kesiev/akihabara?style=social) 154 | - [iioEngine](https://github.com/sbiermanlytle/iioEngine) [[Online Demo](http://iioengine.com/)] - A JavaScript game engine for HTML5 Canvas ![](https://img.shields.io/github/stars/sbiermanlytle/iioEngine?style=social) ![](https://img.shields.io/github/forks/sbiermanlytle/iioEngine?style=social) 155 | - [cocos2d-js](https://github.com/cocos2d/cocos2d-js) [[Online Demo](https://www.cocos.com/)] cocos2d-x for js. ![](https://img.shields.io/github/stars/cocos2d/cocos2d-js?style=social) ![](https://img.shields.io/github/forks/cocos2d/cocos2d-js?style=social) 156 | - [Phaser](https://github.com/photonstorm/phaser) [[Online Demo](https://phaser.io/examples)] - Phaser is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering. ![](https://img.shields.io/github/stars/photonstorm/phaser?style=social) ![](https://img.shields.io/github/forks/photonstorm/phaser?style=social) 157 | - [phaser-examples](https://github.com/photonstorm/phaser-examples) - Contains hundreds of source code examples and related media for the Phaser HTML5 Game Framework. ![](https://img.shields.io/github/stars/photonstorm/phaser-examples?style=social) ![](https://img.shields.io/github/forks/photonstorm/phaser-examples?style=social) 158 | - [games](https://github.com/channingbreeze/games) - List of small games based on phaser ![](https://img.shields.io/github/stars/channingbreeze/games?style=social) ![](https://img.shields.io/github/forks/channingbreeze/games?style=social) 159 | - [phaser3-examples](https://github.com/photonstorm/phaser3-examples) - Phaser 3 Examples. ![](https://img.shields.io/github/stars/photonstorm/phaser3-examples?style=social) ![](https://img.shields.io/github/forks/photonstorm/phaser3-examples?style=social) 160 | - [phaser-ce](https://github.com/photonstorm/phaser-ce) - Phaser CE is a fun, free and fast 2D game framework for making HTML5 games for desktop and mobile web browsers, supporting Canvas and WebGL rendering. ![](https://img.shields.io/github/stars/photonstorm/phaser-ce?style=social) ![](https://img.shields.io/github/forks/photonstorm/phaser-ce?style=social) 161 | - [phaser3-project-template](https://github.com/photonstorm/phaser3-project-template) - A Phaser 3 Project Template. ![](https://img.shields.io/github/stars/photonstorm/phaser3-project-template?style=social) ![](https://img.shields.io/github/forks/photonstorm/phaser3-project-template?style=social) 162 | - [hex-engine](https://github.com/suchipi/hex-engine) [[Online Demo](https://hex-engine.dev/docs/examples)] - A modern 2D game engine for the browser. ![](https://img.shields.io/github/stars/suchipi/hex-engine?style=social) ![](https://img.shields.io/github/forks/suchipi/hex-engine?style=social) 163 | 164 | ### Flowchart 165 | - [GOJS](https://gojs.net/latest/index.html) [[Online Demo](https://gojs.net/latest/samples/)] - JavaScript diagramming library for interactive flowcharts, org charts, design tools, planning tools, visual languages. ![](https://img.shields.io/github/stars/NorthwoodsSoftware/GoJS?style=social) ![](https://img.shields.io/github/forks/NorthwoodsSoftware/GoJS?style=social) 166 | - [drawio](https://github.com/jgraph/drawio) [[Online Demo](https://app.diagrams.net/)] - a configurable diagramming/whiteboarding visualization application. ![](https://img.shields.io/github/stars/jgraph/drawio?style=social) ![](https://img.shields.io/github/forks/jgraph/drawio?style=social) 167 | - [Drawflow](https://github.com/jerosoler/Drawflow) [[Online Demo](https://jerosoler.github.io/Drawflow/)] - Simple flow library 🖥️🖱️ ![](https://img.shields.io/github/stars/jerosoler/Drawflow?style=social) ![](https://img.shields.io/github/forks/jerosoler/Drawflow?style=social) 168 | - [Flowy](https://github.com/alyssaxuu/flowy) [[Online Demo](https://alyssax.com/x/flowy/)] - The minimal javascript library to create flowcharts ✨ ![](https://img.shields.io/github/stars/alyssaxuu/flowy?style=social) ![](https://img.shields.io/github/forks/alyssaxuu/flowy?style=social) 169 | - [flowchart.js](https://github.com/adrai/flowchart.js) - Draws simple SVG flow chart diagrams from textual representation of the diagram. ![](https://img.shields.io/github/stars/adrai/flowchart.js?style=social) ![](https://img.shields.io/github/forks/adrai/flowchart.js?style=social) 170 | - [mermaid](https://github.com/mermaid-js/mermaid) [[Online Demo](https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW0hhcmRdIC0tPnxUZXh0fCBCKFJvdW5kKVxuICAgIEIgLS0-IEN7RGVjaXNpb259XG4gICAgQyAtLT58T25lfCBEW1Jlc3VsdCAxXVxuICAgIEMgLS0-fFR3b3wgRVtSZXN1bHQgMl0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ)] - Generation of diagram and flowchart from text in a similar manner as markdown. ![](https://img.shields.io/github/stars/mermaid-js/mermaid?style=social) ![](https://img.shields.io/github/forks/mermaid-js/mermaid?style=social) 171 | - [wireflow](https://github.com/vanila-io/wireflow) [[Online Demo](https://app.wireflow.co/)] - Wireflow - user flow chart real-time collaborative tool. ![](https://img.shields.io/github/stars/vanila-io/wireflow?style=social) ![](https://img.shields.io/github/forks/vanila-io/wireflow?style=social) 172 | - [butterfly](https://github.com/alibaba/butterfly) [[Online Demo](https://butterfly-dag.gitee.io/butterfly-dag/demo/analysis)] - 🦋Butterfly，A JavaScript/React/Vue2 Diagramming library which concentrate on flow layout field. ![](https://img.shields.io/github/stars/alibaba/butterfly?style=social) ![](https://img.shields.io/github/forks/alibaba/butterfly?style=social) 173 | 174 | ### Gantt 175 | - The following Gantt chart is not implemented based on canvas: 176 | - [gantt](https://github.com/frappe/gantt) [[Online Demo](https://frappe.io/gantt)] - Open Source Javascript Gantt. ![](https://img.shields.io/github/stars/frappe/gantt?style=social) ![](https://img.shields.io/github/forks/frappe/gantt?style=social) 177 | - [jQueryGantt](https://github.com/robicch/jQueryGantt) [[Online Demo](https://gantt.twproject.com/)] - jQuery Gantt editor. ![](https://img.shields.io/github/stars/robicch/jQueryGantt?style=social) ![](https://img.shields.io/github/forks/robicch/jQueryGantt?style=social) 178 | - [Gantt-Chart](https://github.com/dk8996/Gantt-Chart) [[Online Demo](http://bl.ocks.org/dk8996/5534835)] - Gantt chart library using D3.js. ![](https://img.shields.io/github/stars/dk8996/Gantt-Chart?style=social) ![](https://img.shields.io/github/forks/dk8996/Gantt-Chart?style=social) 179 | - [dhtmlxGantt](https://github.com/DHTMLX/gantt) [[Online Demo](https://docs.dhtmlx.com/gantt/samples/01_initialization/08_explicit_time_range.html)] - GPL version of Javascript Gantt Chart. ![](https://img.shields.io/github/stars/DHTMLX/gantt?style=social) ![](https://img.shields.io/github/forks/DHTMLX/gantt?style=social) 180 | - [gantt-for-react](https://github.com/hustcc/gantt-for-react) [[Online Demo](https://git.hust.cc/gantt-for-react/)] - 🌿 Frappe Gantt components for React wrapper. ![](https://img.shields.io/github/stars/hustcc/gantt-for-react?style=social) ![](https://img.shields.io/github/forks/hustcc/gantt-for-react?style=social) 181 | - [jquery.ganttView](https://github.com/thegrubbsian/jquery.ganttView) [[Online Demo](http://thegrubbsian.github.io/jquery.ganttView/example/index.html)] - An editable jQuery Gantt chart plugin. ![](https://img.shields.io/github/stars/thegrubbsian/jquery.ganttView?style=social) ![](https://img.shields.io/github/forks/thegrubbsian/jquery.ganttView?style=social) 182 | - [wl-gantt](https://github.com/hql7/wl-gantt) - An easy-to-use gantt plug-in for the vue framework. ![](https://img.shields.io/github/stars/hql7/wl-gantt?style=social) ![](https://img.shields.io/github/forks/hql7/wl-gantt?style=social) 183 | - [gantt-schedule-timeline-calendar](https://github.com/neuronetio/gantt-schedule-timeline-calendar) [[Online Demo](https://gantt-schedule-timeline-calendar.neuronet.io/examples)] - Gantt Gantt Gantt Timeline Schedule Calendar [ javascript gantt, js gantt, projects gantt, timeline, scheduler, gantt timeline, reservation timeline, react gantt, angular gantt, vue gantt, svelte gantt, booking manager ] ![](https://img.shields.io/github/stars/neuronetio/gantt-schedule-timeline-calendar?style=social) ![](https://img.shields.io/github/forks/neuronetio/gantt-schedule-timeline-calendar?style=social) 184 | 185 | ### Organization charts 186 | - [OrgChart](https://github.com/dabeng/OrgChart/blob/master/README.zh-cn.md) [[Online Demo](https://dabeng.github.io/OrgChart/)] - It's a simple and direct organization chart plugin. Anytime you want a tree-like chart, you can turn to OrgChart. ![](https://img.shields.io/github/stars/dabeng/OrgChart?style=social) ![](https://img.shields.io/github/forks/dabeng/OrgChart?style=social) 187 | 188 | ### UML 189 | - [umlet](https://github.com/umlet/umlet) [[Online Demo](http://www.umletino.com/umletino.html)] - Free UML Tool for Fast UML Diagrams ![](https://img.shields.io/github/stars/umlet/umlet?style=social) ![](https://img.shields.io/github/forks/umlet/umlet?style=social) 190 | 191 | ### Graph Editing 192 | - [idraw](https://github.com/idrawjs/idraw) [[Online Demo](https://idraw.js.org/)] - A simple JavaScript framework for Drawing on the web. ![](https://img.shields.io/github/stars/idrawjs/idraw?style=social) ![](https://img.shields.io/github/forks/idrawjs/idraw?style=social) 193 | - [Workflow Designer](https://github.com/guozhaolong/wfd) [[Online Demo](https://guozhaolong.github.io/wfd/)] - flowable workflow designer base on @antv/g6。 ![](https://img.shields.io/github/stars/guozhaolong/wfd?style=social) ![](https://img.shields.io/github/forks/guozhaolong/wfd?style=social) 194 | - [vue-g6-editor](https://github.com/caoyu48/vue-g6-editor) [[Online Demo](https://github.com/caoyu48/vue-g6-editor/blob/master/1.gif)] - Visual graph editor based on vue ande g6. ![](https://img.shields.io/github/stars/caoyu48/vue-g6-editor?style=social) ![](https://img.shields.io/github/forks/caoyu48/vue-g6-editor?style=social) 195 | - [X-Flowchart-Vue](https://github.com/OXOYO/X-Flowchart-Vue) [[Online Demo](http://oxoyo.co/X-Flowchart-Vue/)] - A visual graph editor based on G6 and Vue. ![](https://img.shields.io/github/stars/OXOYO/X-Flowchart-Vue?style=social) ![](https://img.shields.io/github/forks/OXOYO/X-Flowchart-Vue?style=social) 196 | - [web-pdm](https://erd.zyking.xyz/) [[Online Demo](https://erd.zyking.xyz/demo)] - ER graph tools based on G6, the ultimate goal is to make an online version of powerdesigner. ![](https://img.shields.io/github/stars/lusess123/web-pdm?style=social) ![](https://img.shields.io/github/forks/lusess123/web-pdm?style=social) 197 | - [ng-antv](https://github.com/dappsnation/ng-antv) - Angular wrapper around the antv libraries. ![](https://img.shields.io/github/stars/dappsnation/ng-antv?style=social) ![](https://img.shields.io/github/forks/dappsnation/ng-antv?style=social) 198 | - [welabx-g6](https://github.com/claudewowo/welabx-g6) [[Online Demo](https://claudewowo.github.io/welabx-g6/dist/?_blank)] - welabx - antv G6. ![](https://img.shields.io/github/stars/claudewowo/welabx-g6?style=social) ![](https://img.shields.io/github/forks/claudewowo/welabx-g6?style=social) 199 | - [topology](https://github.com/le5le-com/topology) [[Online Demo](http://topology.le5le.com/workspace)] - A diagram (topology, UML) framework uses canvas and typescript. ![](https://img.shields.io/github/stars/le5le-com/topology?style=social) ![](https://img.shields.io/github/forks/le5le-com/topology?style=social) 200 | - [excalidraw](https://github.com/excalidraw/excalidraw) [[Online Demo](https://excalidraw.com/)] - Virtual whiteboard for sketching hand-drawn like diagrams ![](https://img.shields.io/github/stars/excalidraw/excalidraw?style=social) ![](https://img.shields.io/github/forks/excalidraw/excalidraw?style=social) 201 | - [diagram-maker](https://github.com/awslabs/diagram-maker) [[在线示例](https://awslabs.github.io/diagram-maker/examples/LeftRightRectangular.html)] - 为任何图形类数据提供交互式编辑器的库 ![](https://img.shields.io/github/stars/awslabs/diagram-maker?style=social) ![](https://img.shields.io/github/forks/awslabs/diagram-maker?style=social) 202 | 203 | ### Spreadsheet 204 | - [x-spreadsheet](https://github.com/myliang/x-spreadsheet) [[Online Demo](https://myliang.github.io/x-spreadsheet/)] - A web-based JavaScript（canvas） spreadsheet. ![](https://img.shields.io/github/stars/myliang/x-spreadsheet?style=social) ![](https://img.shields.io/github/forks/myliang/x-spreadsheet?style=social) 205 | - [Luckysheet](https://github.com/mengshukeji/Luckysheet/blob/master/README-zh.md) [[Online Demo](https://mengshukeji.github.io/LuckysheetDemo/)] - Luckysheet is an online spreadsheet like excel that is powerful, simple to configure, and completely open source. ![](https://img.shields.io/github/stars/mengshukeji/Luckysheet?style=social) ![](https://img.shields.io/github/forks/mengshukeji/Luckysheet?style=social) 206 | - [sheetsee.js](https://github.com/jlord/sheetsee.js) - 👀 📈 Visualize Data from a Google Spreadsheet. ![](https://img.shields.io/github/stars/jlord/sheetsee.js?style=social) ![](https://img.shields.io/github/forks/jlord/sheetsee.js?style=social) 207 | - [SlickGrid](https://github.com/mleibman/SlickGrid) [[Online Demo](http://6pac.github.io/SlickGrid/examples/example4-model.html)] - A lightning fast JavaScript grid/spreadsheet. ![](https://img.shields.io/github/stars/mleibman/SlickGrid?style=social) ![](https://img.shields.io/github/forks/mleibman/SlickGrid?style=social) 208 | - [handsontable](https://github.com/handsontable/handsontable) [[Online Demo](https://handsontable.com/demo)] - JavaScript data grid with a spreadsheet look & feel. Works with React, Angular, and Vue. Supported by the Handsontable team ⚡ ![](https://img.shields.io/github/stars/handsontable/handsontable?style=social) ![](https://img.shields.io/github/forks/handsontable/handsontable?style=social) 209 | - [cheetah-grid](https://github.com/future-architect/cheetah-grid) [[Online Demo](https://future-architect.github.io/cheetah-grid/#/)] - The fastest open-source data table for web. ![](https://img.shields.io/github/stars/future-architect/cheetah-grid?style=social) ![](https://img.shields.io/github/forks/future-architect/cheetah-grid?style=social) 210 | - [Jspreadsheet CE](https://github.com/jspreadsheet/ce) [[Online Demo](https://bossanova.uk/jspreadsheet/v4/examples)] - Jspreadsheet is a lightweight vanilla javascript plugin to create amazing web-based interactive tables and spreadsheets compatible with other spreadsheet software. ![](https://img.shields.io/github/stars/jspreadsheet/ce?style=social) ![](https://img.shields.io/github/forks/jspreadsheet/ce?style=social) 211 | - [canvas-datagrid](https://github.com/TonyGermaneri/canvas-datagrid) [[Online Demo](https://canvas-datagrid.js.org/demo.html)] - Canvas based data grid web component. Capable of displaying millions of contiguous hierarchical rows and columns without paging or loading, on a single canvas element. ![](https://img.shields.io/github/stars/TonyGermaneri/canvas-datagrid?style=social) ![](https://img.shields.io/github/forks/TonyGermaneri/canvas-datagrid?style=social) 212 | 213 | ### Charts Libraries 214 | - [D3](https://github.com/d3/d3) [[Online Demo](https://observablehq.com/@d3/gallery)] - Bring data to life with SVG, Canvas and HTML. 📊📈🎉 ![](https://img.shields.io/github/stars/d3/d3?style=social) ![](https://img.shields.io/github/forks/d3/d3?style=social) 215 | - [awesome-d3](https://github.com/wbkd/awesome-d3) - A list of D3 libraries, plugins and utilities. ![](https://img.shields.io/github/stars/wbkd/awesome-d3?style=social) ![](https://img.shields.io/github/forks/wbkd/awesome-d3?style=social) 216 | - [angular-charts](https://github.com/chinmaymk/angular-charts) - angular directives for creating common charts using d3. ![](https://img.shields.io/github/stars/chinmaymk/angular-charts?style=social) ![](https://img.shields.io/github/forks/chinmaymk/angular-charts?style=social) 217 | - [nvd3](http://nvd3-community.github.io/nvd3/examples/documentation.html) [[Online Demo](http://nvd3-community.github.io/nvd3/)] - angular directives for creating common charts using d3. ![](https://img.shields.io/github/stars/novus/nvd3?style=social) ![](https://img.shields.io/github/forks/novus/nvd3?style=social) 218 | - [c3](https://c3js.org/) [[Online Demo](https://c3js.org/examples.html)] - 📊 A D3-based reusable chart library. ![](https://img.shields.io/github/stars/c3js/c3?style=social) ![](https://img.shields.io/github/forks/c3js/c3?style=social) 219 | - [dc.js](https://github.com/dc-js/dc.js) [[Online Demo](http://dc-js.github.io/dc.js/)] - Multi-Dimensional charting built to work natively with crossfilter rendered with d3.js. ![](https://img.shields.io/github/stars/dc-js/dc.js?style=social) ![](https://img.shields.io/github/forks/dc-js/dc.js?style=social) 220 | - [britecharts](https://britecharts.github.io/britecharts/) [[Online Demo](https://britecharts.github.io/britecharts/tutorial-bar.html)] - Client-side reusable Charting Library based on D3.js v5 that allows easy and intuitive use of charts and components that can be composed together creating amazing visualizations. ![](https://img.shields.io/github/stars/britecharts/britecharts?style=social) ![](https://img.shields.io/github/forks/britecharts/britecharts?style=social) 221 | - [neo4jd3](https://github.com/eisman/neo4jd3) [[Online Demo](https://britecharts.github.io/britecharts/tutorial-bar.html)] - Neo4j graph visualization using D3.js ![](https://img.shields.io/github/stars/eisman/neo4jd3?style=social) ![](https://img.shields.io/github/forks/eisman/neo4jd3?style=social) 222 | - [nivo](https://github.com/plouc/nivo) [[Online Demo](https://nivo.rocks/components/)] - nivo provides a rich set of dataviz components, built on top of the awesome d3 and React libraries ![](https://img.shields.io/github/stars/plouc/nivo?style=social) ![](https://img.shields.io/github/forks/plouc/nivo?style=social) 223 | 224 | - [echarts](https://github.com/apache/echarts) [[Online Demo](https://echarts.apache.org/examples/zh/index.html)] - Apache ECharts is a powerful, interactive charting and data visualization library for browser. ![](https://img.shields.io/github/stars/apache/echarts?style=social) ![](https://img.shields.io/github/forks/apache/echarts?style=social) 225 | - [v-charts](https://v-charts.js.org/#/) [[Online Demo](https://codesandbox.io/s/z69myovqzx)] - 基于 Vue2.0 和 ECharts 封装的图表组件📈📊. ![](https://img.shields.io/github/stars/ElemeFE/v-charts?style=social) ![](https://img.shields.io/github/forks/ElemeFE/v-charts?style=social) 226 | - [echarts-for-weixin](https://github.com/ecomfe/echarts-for-weixin) - Apache ECharts (incubating) Apache ECharts (incubating) for wechat app. ![](https://img.shields.io/github/stars/ecomfe/echarts-for-weixin?style=social) ![](https://img.shields.io/github/forks/ecomfe/echarts-for-weixin?style=social) 227 | 228 | - [Chart.js](https://github.com/chartjs/Chart.js) [[Online Demo](https://www.chartjs.org/docs/latest/samples/bar/vertical.html)] - Simple HTML5 Charts using the **canvas** tag. ![](https://img.shields.io/github/stars/chartjs/Chart.js?style=social) ![](https://img.shields.io/github/forks/chartjs/Chart.js?style=social) 229 | - [vue-chartjs](https://vue-chartjs.org/zh-cn/) [[Online Demo](http://demo.vue-chartjs.org/)] - 📊 Vue.js wrapper for Chart.js ![](https://img.shields.io/github/stars/apertureless/vue-chartjs?style=social) ![](https://img.shields.io/github/forks/apertureless/vue-chartjs?style=social) 230 | - [react-chartjs](https://github.com/reactjs/react-chartjs) [[Online Demo]()] - common react charting components using chart.js ![](https://img.shields.io/github/stars/reactjs/react-chartjs?style=social) ![](https://img.shields.io/github/forks/reactjs/react-chartjs?style=social) 231 | - [angular-chart.js](http://jtblin.github.io/angular-chart.js/) [[Online Demo](http://jtblin.github.io/angular-chart.js/#top)] - Reactive, responsive, beautiful charts for AngularJS using Chart.js ![](https://img.shields.io/github/stars/jtblin/angular-chart.js?style=social) ![](https://img.shields.io/github/forks/jtblin/angular-chart.js?style=social) 232 | 233 | - [AntV](https://antv.vision/) - A new generation of data visualization solution from Ant Group. 234 | - [G](https://g-next.antv.vision/en/docs/guide/introduce) [[Online Demo](https://g-next.antv.vision/en/examples/shape)] - A powerful rendering engine implemented with Canvas2D / SVG / WebGL / WebGPU. ![](https://img.shields.io/github/stars/antvis/g?style=social) ![](https://img.shields.io/github/forks/antvis/g?style=social) 235 | - [G2](https://github.com/antvis/g2) [[Online Demo](https://g2.antv.vision/zh/examples/gallery)] - 📊 A highly interactive data-driven visualization grammar for statistical charts. ![](https://img.shields.io/github/stars/antvis/g2?style=social) ![](https://img.shields.io/github/forks/antvis/g2?style=social) 236 | - [G2Plot](https://github.com/antvis/g2plot) [[Online Demo](https://g2plot.antv.vision/zh/examples/gallery)] - 🍡 An interactive and responsive charting library. ![](https://img.shields.io/github/stars/antvis/g2plot?style=social) ![](https://img.shields.io/github/forks/antvis/g2plot?style=social) 237 | - [G6](https://g6.antv.vision/zh) [[Online Demo](https://g6.antv.vision/zh/examples/gallery)] - ♾ A Graph Visualization Framework in JavaScript. ![](https://img.shields.io/github/stars/antvis/g6?style=social) ![](https://img.shields.io/github/forks/antvis/g6?style=social) 238 | - [F2](https://antv-f2.gitee.io/zh/docs/tutorial/getting-started) [[Online Demo](https://antv-f2.gitee.io/zh/examples/gallery)] - 📱📈An elegant, interactive and flexible charting library for mobile. ![](https://img.shields.io/github/stars/antvis/F2?style=social) 239 | - [F2Native](https://f2native.antv.vision/en) [[Online Demo](https://f2native.antv.vision/en/docs/examples/line/line)] - iphonechart_with_upwards_trendAn elegant, interactive and flexible native charting library for mobile. ![](https://img.shields.io/github/stars/antvis/f2native?style=social) ![](https://img.shields.io/github/forks/antvis/f2native?style=social) 240 | - [F6](https://f6.antv.vision/zh) [[Online Demo](https://f6.antv.vision/zh/docs/examples/tree/compactBox)] - F6 is a graph visualization engine which provides quick and smooth operations on mobile devices. ![](https://img.shields.io/github/stars/antvis/f6?style=social) ![](https://img.shields.io/github/forks/antvis/f6?style=social) 241 | - [X6](https://x6.antv.vision/zh) [[Online Demo](https://x6.antv.vision/zh/examples/gallery)] - 🚀 JavaScript diagramming library that uses SVG and HTML for rendering. ![](https://img.shields.io/github/stars/antvis/x6?style=social) ![](https://img.shields.io/github/forks/antvis/x6?style=social) 242 | - [XFlow](https://xflow.antv.vision/en-US) [[Online Demo](https://xflow.antv.vision/en-US/docs/tutorial/intro/getting-started)] - Based on X6 & React, professional solution for graph editing engine. ![](https://img.shields.io/github/stars/antvis/XFlow?style=social) ![](https://img.shields.io/github/forks/antvis/XFlow?style=social) 243 | - [S2](https://github.com/antvis/s2) [[Online Demo](https://s2.antv.vision/zh/examples/gallery)] - ⚡️ Practical analytical Table rendering core lib. ![](https://img.shields.io/github/stars/antvis/s2?style=social) ![](https://img.shields.io/github/forks/antvis/s2?style=social) 244 | - [L7](https://l7.antv.vision/zh) [[Online Demo](https://l7.antv.vision/en/examples/gallery)] - 🌎 Large-scale WebGL-powered Geospatial Data Visualization analysis framework which relies on Mapbox GL or AMap to render basemaps. ![](https://img.shields.io/github/stars/antvis/l7?style=social) ![](https://img.shields.io/github/forks/antvis/l7?style=social) 245 | - [L7Plot](https://l7plot.antv.vision/en) [[Online Demo](https://l7plot.antv.vision/en/examples/gallery)] - L7Plot is easy to use, rich charts, support customized geospatial charts Library. ![](https://img.shields.io/github/stars/antvis/L7Plot?style=social) ![](https://img.shields.io/github/forks/antvis/L7Plot?style=social) 246 | - [Graphin](https://graphin.antv.vision/) [[Online Demo](https://graphin.antv.vision/components/interaction/context-menu)] - A React toolkit for graph visualization based on G6. ![](https://img.shields.io/github/stars/antvis/graphin?style=social) ![](https://img.shields.io/github/forks/antvis/graphin?style=social) 247 | - [Ant Design Charts](https://charts.ant.design/en) [[Online Demo](https://charts.ant.design/en/examples/gallery)] - A React Chart Library ![](https://img.shields.io/github/stars/ant-design/ant-design-charts?style=social) ![](https://img.shields.io/github/forks/ant-design/ant-design-charts?style=social) 248 | - [AVA](https://ava.antv.vision/en) [[Online Demo](https://ava.antv.vision/en/examples/gallery)] - robot A framework for automated visual analytics. ![](https://img.shields.io/github/stars/antvis/ava?style=social) ![](https://img.shields.io/github/forks/antvis/ava?style=social) 249 | - [Viser](https://viserjs.github.io/) [[Online Demo](https://viserjs.github.io/demoHome.html)] - A toolkit fit for data vis engineer based on G2. Support React, Vue and AngularJS. ![](https://img.shields.io/github/stars/viserjs/viser?style=social) ![](https://img.shields.io/github/forks/viserjs/viser?style=social) 250 | - [highcharts](https://github.com/highcharts/highcharts) [[Online Demo](https://www.highcharts.com/demo)] - Highcharts JS, the JavaScript charting framework. ![](https://img.shields.io/github/stars/highcharts/highcharts?style=social) ![](https://img.shields.io/github/forks/highcharts/highcharts?style=social) 251 | 252 | - [wx-charts](https://github.com/xiaolin3303/wx-charts) [[Online Demo](https://github.com/xiaolin3303/wx-charts-demo)] - Charts for WeChat Mini Program. ![](https://img.shields.io/github/stars/xiaolin3303/wx-charts?style=social) ![](https://img.shields.io/github/forks/xiaolin3303/wx-charts?style=social) 253 | 254 | - [wordcloud2.js](https://github.com/timdream/wordcloud2.js) [[Online Demo](https://wordcloud2-js.timdream.org/#love)] - Tag cloud/Wordle presentation on 2D canvas or HTML. ![](https://img.shields.io/github/stars/timdream/wordcloud2.js?style=social) ![](https://img.shields.io/github/forks/timdream/wordcloud2.js?style=social) 255 | 256 | - [chartist-js](https://github.com/gionkunz/chartist-js) [[Online Demo](http://gionkunz.github.io/chartist-js/examples.html)] - Simple responsive charts. ![](https://img.shields.io/github/stars/gionkunz/chartist-js?style=social) ![](https://img.shields.io/github/forks/gionkunz/chartist-js?style=social) 257 | 258 | - [charts](https://frappe.io/charts/docs) [[Online Demo](https://frappe.io/charts)] - Simple, responsive, modern SVG Charts with zero dependencies. ![](https://img.shields.io/github/stars/frappe/charts?style=social) ![](https://img.shields.io/github/forks/frappe/charts?style=social) 259 | 260 | - [flot](http://www.flotcharts.org/) [[Online Demo](http://www.flotcharts.org/flot/examples/)] - Attractive JavaScript charts for jQuery. ![](https://img.shields.io/github/stars/flot/flot?style=social) ![](https://img.shields.io/github/forks/flot/flot?style=social) 261 | 262 | - [apexcharts.js](https://apexcharts.com/) [[Online Demo](https://apexcharts.com/javascript-chart-demos/)] - 📊 Interactive JavaScript Charts built on SVG. ![](https://img.shields.io/github/stars/apexcharts/apexcharts.js?style=social) ![](https://img.shields.io/github/forks/apexcharts/apexcharts.js?style=social) 263 | 264 | - [plotly.js](https://github.com/plotly/plotly.js) [[Online Demo](https://plotly.com/javascript/)] - Open-source JavaScript charting library behind Plotly and Dash. ![](https://img.shields.io/github/stars/plotly/plotly.js?style=social) ![](https://img.shields.io/github/forks/plotly/plotly.js?style=social) 265 | 266 | - [easy-pie-chart](https://github.com/rendro/easy-pie-chart) - easy pie chart is a lightweight plugin to draw simple, animated pie charts for single values. ![](https://img.shields.io/github/stars/rendro/easy-pie-chart?style=social) ![](https://img.shields.io/github/forks/rendro/easy-pie-chart?style=social) 267 | 268 | - [react-vis](https://github.com/uber/react-vis) [[Online Demo](http://uber.github.io/react-vis/examples/showcases/axes)] - Data Visualization Components. ![](https://img.shields.io/github/stars/uber/react-vis?style=social) ![](https://img.shields.io/github/forks/uber/react-vis?style=social) 269 | - [vega](https://vega.github.io/vega) [[Online Demo](https://vega.github.io/vega/examples/)] - A visualization grammar. ![](https://img.shields.io/github/stars/vega/vega?style=social) ![](https://img.shields.io/github/forks/vega/vega?style=social) 270 | - [heatmap.js](https://github.com/pa7/heatmap.js) - 🔥 JavaScript Library for HTML5 canvas based heatmaps. ![](https://img.shields.io/github/stars/pa7/heatmap.js?style=social) ![](https://img.shields.io/github/forks/pa7/heatmap.js?style=social) 271 | - [zeu](https://github.com/shzlw/zeu) [[Online Demo](https://shzlw.github.io/zeu/examples/my-command-center.html)] - A JavaScript library for real-time visualization. ![](https://img.shields.io/github/stars/shzlw/zeu?style=social) ![](https://img.shields.io/github/forks/shzlw/zeu?style=social) 272 | - [HQChart](https://github.com/jones2000/HQChart) - Wechat applet Shanghai and Shenzhen / Hong Kong stocks / digital currency / futures / U.S. stock K-line (Kline), trend chart, zoom, drag, crosshairs, drawing tools, screenshots, chip charts, analyst syntax, tongdaxin syntax, (wheat syntax), third-party data replacement interface. ![](https://img.shields.io/github/stars/jones2000/HQChart?style=social) ![](https://img.shields.io/github/forks/jones2000/HQChart?style=social) 273 | - [canvas-gauges](https://github.com/Mikhus/canvas-gauges) [[Online Demo](http://canvas-gauges.com/documentation/examples/)] - HTML5 Canvas Gauge. Tiny implementation of highly configurable gauge using pure JavaScript and HTML5 canvas. No dependencies. Suitable for IoT devices because of minimum code base. ![](https://img.shields.io/github/stars/Mikhus/canvas-gauges?style=social) ![](https://img.shields.io/github/forks/Mikhus/canvas-gauges?style=social) 274 | - [lightweight-charts](https://github.com/tradingview/lightweight-charts) [[Online Demo](https://www.tradingview.com/lightweight-charts/)] - Financial lightweight charts built with HTML5 canvas. ![](https://img.shields.io/github/stars/tradingview/lightweight-charts?style=social) ![](https://img.shields.io/github/forks/tradingview/lightweight-charts?style=social) 275 | 276 | ### Poster and Screenshot 277 | - [html2canvas](https://html2canvas.hertzen.com/) [[Online Demo](https://html2canvas.hertzen.com/)] - Screenshots with JavaScript. ![](https://img.shields.io/github/stars/niklasvh/html2canvas?style=social) ![](https://img.shields.io/github/forks/niklasvh/html2canvas?style=social) 278 | - [dom-to-image](https://github.com/tsayen/dom-to-image) - Generates an image from a DOM node using HTML5 canvas. ![](https://img.shields.io/github/stars/tsayen/dom-to-image?style=social) ![](https://img.shields.io/github/forks/tsayen/dom-to-image?style=social) 279 | - [html-to-image](https://github.com/bubkoo/html-to-image) - ✂️ Generates an image from a DOM node using HTML5 canvas and SVG. ![](https://img.shields.io/github/stars/bubkoo/html-to-image?style=social) ![](https://img.shields.io/github/forks/bubkoo/html-to-image?style=social) 280 | - [canvas2image](https://github.com/hongru/canvas2image) [[Online Demo](https://github.com/hongru/canvas2image/blob/master/index.html)] - a tool for saving or converting canvas as img. ![](https://img.shields.io/github/stars/hongru/canvas2image?style=social) ![](https://img.shields.io/github/forks/hongru/canvas2image?style=social) 281 | - [mp_canvas_drawer](https://github.com/kuckboy1994/mp_canvas_drawer) [[Online Demo](https://github.com/kuckboy1994/mp_canvas_drawer#%E6%BC%94%E7%A4%BA)] - Canvas drawing picture assistant on wechat miniapp, making and sharing pictures of circle of friends with a JSON. ![](https://img.shields.io/github/stars/kuckboy1994/mp_canvas_drawer?style=social) ![](https://img.shields.io/github/forks/kuckboy1994/mp_canvas_drawer?style=social) 282 | - [vue-canvas-poster](https://github.com/sunniejs/vue-canvas-poster) [[Online Demo](https://www.sunniejs.cn/vant-demo/#/example/poster)] - Vue poster,a lightweight vue component that draws canvas images via css properties. ![](https://img.shields.io/github/stars/sunniejs/vue-canvas-poster?style=social) ![](https://img.shields.io/github/forks/sunniejs/vue-canvas-poster?style=social) 283 | - [wxa-plugin-canvas](https://github.com/jasondu/wxa-plugin-canvas) - Wechat applet poster component ![](https://img.shields.io/github/stars/jasondu/wxa-plugin-canvas?style=social) ![](https://img.shields.io/github/forks/jasondu/wxa-plugin-canvas?style=social) 284 | 285 | ### Data processing 286 | - [html2pdf.js](https://github.com/eKoopmans/html2pdf.js) - Client-side HTML-to-PDF rendering using pure JS. ![](https://img.shields.io/github/stars/eKoopmans/html2pdf.js?style=social) ![](https://img.shields.io/github/forks/eKoopmans/html2pdf.js?style=social) 287 | - [rasterizeHTML.js](https://github.com/cburgmer/rasterizeHTML.js) - Renders HTML into the browser's canvas. ![](https://img.shields.io/github/stars/cburgmer/rasterizeHTML.js?style=social) ![](https://img.shields.io/github/forks/cburgmer/rasterizeHTML.js?style=social) 288 | - [JavaScript-Canvas-to-Blob](https://github.com/blueimp/JavaScript-Canvas-to-Blob) - JavaScript Canvas to Blob is a function to convert canvas elements into Blob objects. ![](https://img.shields.io/github/stars/blueimp/JavaScript-Canvas-to-Blob?style=social) ![](https://img.shields.io/github/forks/blueimp/JavaScript-Canvas-to-Blob?style=social) 289 | - [jsgif](https://github.com/antimatter15/jsgif) - Save a HTML5 Canvas to GIF and Animations. A port of as3gif GIFPlayer to JS. ![](https://img.shields.io/github/stars/antimatter15/jsgif?style=social) ![](https://img.shields.io/github/forks/antimatter15/jsgif?style=social) 290 | - [whammy](https://github.com/antimatter15/whammy) - A real time javascript webm encoder based on a canvas hack. ![](https://img.shields.io/github/stars/antimatter15/whammy?style=social) ![](https://img.shields.io/github/forks/antimatter15/whammy?style=social) 291 | - [js-imagediff](https://github.com/HumbleSoftware/js-imagediff) - JavaScript / Canvas based image diff utility with Jasmine matchers for testing canvas. ![](https://img.shields.io/github/stars/HumbleSoftware/js-imagediff?style=social) ![](https://img.shields.io/github/forks/HumbleSoftware/js-imagediff?style=social) 292 | - [canvas2svg](https://github.com/gliffy/canvas2svg) [[Online Demo](http://gliffy.github.io/canvas2svg/)] - Translates HTML5 Canvas draw commands to SVG ![](https://img.shields.io/github/stars/gliffy/canvas2svg?style=social) ![](https://img.shields.io/github/forks/gliffy/canvas2svg?style=social) 293 | - [canvg](https://github.com/canvg/canvg) [[Online Demo](https://canvg.github.io/canvg/demo/index.html)] - Javascript SVG parser and renderer on Canvas. ![](https://img.shields.io/github/stars/canvg/canvg?style=social) ![](https://img.shields.io/github/forks/canvg/canvg?style=social) 294 | 295 | ### Image processing 296 | - [tui.image-editor](https://github.com/nhn/tui.image-editor) [[Online Demo](http://nhn.github.io/tui.image-editor/latest/tutorial-example01-includeUi)] - 🍞🎨 Full-featured photo image editor using canvas. It is really easy, and it comes with great filters. ![](https://img.shields.io/github/stars/nhn/tui.image-editor?style=social) ![](https://img.shields.io/github/forks/nhn/tui.image-editor?style=social) 297 | - [merge-images](https://github.com/lukechilds/merge-images) - Easily compose images together without messing around with canvas. ![](https://img.shields.io/github/stars/lukechilds/merge-images?style=social) ![](https://img.shields.io/github/forks/lukechilds/merge-images?style=social) 298 | - [we-cropper](https://we-plugin.github.io/we-cropper/#/) [[Online Demo](https://unpkg.com/we-cropper@1.2.0/docs/assets/online.jpg)] - Wechat miniapp image cutting tool. ![](https://img.shields.io/github/stars/we-plugin/we-cropper?style=social) ![](https://img.shields.io/github/forks/we-plugin/we-cropper?style=social) 299 | - [miniPaint](https://github.com/viliusle/miniPaint) [[Online Demo](https://viliusle.github.io/miniPaint/)] - online image editor. ![](https://img.shields.io/github/stars/viliusle/miniPaint?style=social) ![](https://img.shields.io/github/forks/viliusle/miniPaint?style=social) 300 | - [animockup](https://github.com/alyssaxuu/animockup) [[Online Demo](https://animockup.com/)] - Create animated mockups in the browser 🔥 ![](https://img.shields.io/github/stars/alyssaxuu/animockup?style=social) ![](https://img.shields.io/github/forks/alyssaxuu/animockup?style=social) 301 | - [vintageJS](https://github.com/rendro/vintageJS) - Add a retro/vintage effect to images using the HTML5 canvas element. ![](https://img.shields.io/github/stars/rendro/vintageJS?style=social) ![](https://img.shields.io/github/forks/rendro/vintageJS?style=social) 302 | - [glitch-canvas](https://github.com/snorpey/glitch-canvas) [[Online Demo](https://snorpey.github.io/jpg-glitch/)] - glitch your canvas element. ![](https://img.shields.io/github/stars/snorpey/glitch-canvas?style=social) ![](https://img.shields.io/github/forks/snorpey/glitch-canvas?style=social) 303 | - [JIC](https://github.com/brunobar79/J-I-C) [[Online Demo](http://makeitsolutions.com/labs/jic/)] - J I C is a Javascript Image Compressor using HTML5 Canvas & File API that allows you to compress your jpeg & png images before uploading to the server (100% client-side and no extra libraries required!). ![](https://img.shields.io/github/stars/brunobar79/J-I-C?style=social) ![](https://img.shields.io/github/forks/brunobar79/J-I-C?style=social) 304 | - [context-blender](https://github.com/Phrogz/context-blender) - Photoshop-style blend modes for HTML Canvas Contexts. ![](https://img.shields.io/github/stars/Phrogz/context-blender?style=social) ![](https://img.shields.io/github/forks/Phrogz/context-blender?style=social) 305 | - [ios-imagefile-megapixel](https://github.com/stomita/ios-imagefile-megapixel) - Fixes iOS6 Safari's image file rendering issue for large size image (over mega-pixel), which causes unexpected subsampling when drawing it in canvas. ![](https://img.shields.io/github/stars/stomita/ios-imagefile-megapixel?style=social) ![](https://img.shields.io/github/forks/stomita/ios-imagefile-megapixel?style=social) 306 | - [fast-average-color](https://github.com/fast-average-color/fast-average-color) [[Online Demo](https://fast-average-color.github.io/examples/background.html)] - 🍏🍊🍅 Fast Average Color. ![](https://img.shields.io/github/stars/fast-average-color/fast-average-color?style=social) ![](https://img.shields.io/github/forks/fast-average-color/fast-average-color?style=social) 307 | - [mcanvas](https://github.com/xd-tayde/mcanvas) [[Online Demo](http://guoxiaodong.net/)] - mcanvas is a image handler plugin that can easily merge, crop, compress, filter the image and export a image of base64 finally. ![](https://img.shields.io/github/stars/xd-tayde/mcanvas?style=social) ![](https://img.shields.io/github/forks/xd-tayde/mcanvas?style=social) 308 | 309 | ### Image filters 310 | - [canvasfilters](https://github.com/kig/canvasfilters) [[Online Demo](http://fhtr.org/canvasfilters/)] - Canvas image filters ![](https://img.shields.io/github/stars/kig/canvasfilters?style=social) ![](https://img.shields.io/github/forks/kig/canvasfilters?style=social) 311 | 312 | ### Drawingboard 313 | - [jspaint](https://github.com/1j01/jspaint) [[Online Demo](https://jspaint.app/#local:5ee9c6aab5992)] - 🎨 Classic MS Paint, ＲＥＶＩＶＥＤ + ✨Extras. ![](https://img.shields.io/github/stars/1j01/jspaint?style=social) ![](https://img.shields.io/github/forks/1j01/jspaint?style=social) 314 | - [drawingboard.js](https://github.com/Leimi/drawingboard.js) [[Online Demo](http://leimi.github.io/drawingboard.js/)] - A canvas based drawing app that you can integrate easily on your website. ![](https://img.shields.io/github/stars/Leimi/drawingboard.js?style=social) ![](https://img.shields.io/github/forks/Leimi/drawingboard.js?style=social) 315 | - [drawingboard](https://github.com/vipstone/drawingboard) [[Online Demo](https://vipstone.github.io/drawingboard/drawingboard/index.html)] - Advanced Sketchpad - freehand, straight / dashed lines, arrows, all geometry. ![](https://img.shields.io/github/stars/vipstone/drawingboard?style=social) ![](https://img.shields.io/github/forks/vipstone/drawingboard?style=social) 316 | - [draw](https://github.com/amoshydra/draw) [[Online Demo](https://amoshydra.github.io/draw/)] - Web canvas that support pen pressure. ![](https://img.shields.io/github/stars/amoshydra/draw?style=social) ![](https://img.shields.io/github/forks/amoshydra/draw?style=social) 317 | - [tldraw](https://github.com/tldraw/tldraw) [[Online Demo](https://www.tldraw.com/)] - a very good whiteboard ![](https://img.shields.io/github/stars/tldraw/tldraw?style=social) ![](https://img.shields.io/github/forks/tldraw/tldraw?style=social) 318 | 319 | ### Signature pad 320 | - [signature_pad](https://github.com/szimek/signature_pad) [[Online Demo](http://szimek.github.io/signature_pad/)] - HTML5 canvas based smooth signature drawing. ![](https://img.shields.io/github/stars/szimek/signature_pad?style=social) ![](https://img.shields.io/github/forks/szimek/signature_pad?style=social) 321 | - [vue-signature-pad](https://github.com/neighborhood999/vue-signature-pad) [[Online Demo](https://codesandbox.io/s/n5qjp3oqv4)] - 🖋 Vue Signature Pad Component. ![](https://img.shields.io/github/stars/neighborhood999/vue-signature-pad?style=social) ![](https://img.shields.io/github/forks/neighborhood999/vue-signature-pad?style=social) 322 | - [react-signature-pad](https://github.com/blackjk3/react-signature-pad) - A signature pad implementation for react. ![](https://img.shields.io/github/stars/blackjk3/react-signature-pad?style=social) ![](https://img.shields.io/github/forks/blackjk3/react-signature-pad?style=social) 323 | - [angular-signature](https://github.com/legalthings/angular-signature) - HTML5 canvas based smooth signature drawing as angularJS directive. ![](https://img.shields.io/github/stars/legalthings/angular-signature?style=social) ![](https://img.shields.io/github/forks/legalthings/angular-signature?style=social) 324 | - [react-native-signature-pad](https://github.com/kevinstumpf/react-native-signature-pad) - React Native wrapper around szimek's Canvas based Signature Pad. ![](https://img.shields.io/github/stars/kevinstumpf/react-native-signature-pad?style=social) ![](https://img.shields.io/github/forks/kevinstumpf/react-native-signature-pad?style=social) 325 | - [signature-pad](https://github.com/thread-pond/signature-pad) [[Online Demo](https://thread-pond.github.io/signature-pad/examples/require-drawn-signature.html)] - A jQuery plugin for assisting in the creation of an HTML5 canvas based signature pad. Records the drawn signature in JSON for later regeneration. ![](https://img.shields.io/github/stars/thread-pond/signature-pad?style=social) ![](https://img.shields.io/github/forks/thread-pond/signature-pad?style=social) 326 | - [canvas-draw](https://github.com/Louiszhai/canvas-draw) [[Online Demo](http://louiszhai.github.io/res/canvasDraw/#/sign)] - Handwritten signature or drawing with canvas -- supports PC and mobile terminals and horizontal screen. ![](https://img.shields.io/github/stars/Louiszhai/canvas-draw?style=social) ![](https://img.shields.io/github/forks/Louiszhai/canvas-draw?style=social) 327 | - [smooth-signature](https://github.com/linjc/smooth-signature) [[Online Demo](https://l2j2c3.gitee.io/smooth-signature/demo/index.html)] - H5 signature pad for mobile and pc. ![](https://img.shields.io/github/stars/linjc/smooth-signature?style=social) ![](https://img.shields.io/github/forks/linjc/smooth-signature?style=social) 328 | 329 | ### Waveforms animation 330 | - [wavesurfer.js](https://wavesurfer-js.org/) [[Online Demo](https://wavesurfer-js.org/examples/)] - Navigable waveform built on Web Audio and Canvas. ![](https://img.shields.io/github/stars/katspaugh/wavesurfer.js?style=social) ![](https://img.shields.io/github/forks/katspaugh/wavesurfer.js?style=social) 331 | - [waveforms](https://github.com/joshwcomeau/waveforms) - An interactive, explorable explanation about the peculiar magic of sound waves. ![](https://img.shields.io/github/stars/joshwcomeau/waveforms?style=social) [[Online Demo](https://pudding.cool/2018/02/waveforms/)] ![](https://img.shields.io/github/forks/joshwcomeau/waveforms?style=social) 332 | - [siriwave](https://github.com/kopiro/siriwave) [[Online Demo](http://kopiro.github.io/siriwave/)] - The Apple® Siri wave-form replicated in a JS library. ![](https://img.shields.io/github/stars/kopiro/siriwave?style=social) ![](https://img.shields.io/github/forks/kopiro/siriwave?style=social) 333 | - [waves](https://github.com/dli/waves) [[Online Demo](http://david.li/waves/)] - Ocean Wave Simulation. ![](https://img.shields.io/github/stars/dli/waves?style=social) ![](https://img.shields.io/github/forks/dli/waves?style=social) 334 | - [waveform-playlist](https://github.com/naomiaro/waveform-playlist) [[Online Demo](http://naomiaro.github.io/waveform-playlist/)] - Multitrack Web Audio editor and player with canvas waveform preview. Set cues, fades and shift multiple tracks in time. Record audio tracks or provide audio annotations. Export your mix to AudioBuffer or WAV! Project inspired by Audacity. ![](https://img.shields.io/github/stars/naomiaro/waveform-playlist?style=social) ![](https://img.shields.io/github/forks/naomiaro/waveform-playlist?style=social) 335 | - [wavedrom](https://github.com/wavedrom/wavedrom) [[Online Demo](https://wavedrom.com/editor.html)] - 🌊 Digital timing diagram rendering engine. ![](https://img.shields.io/github/stars/wavedrom/wavedrom?style=social) ![](https://img.shields.io/github/forks/wavedrom/wavedrom?style=social) 336 | 337 | ### Particle animation 338 | - [Proton](https://projects.jpeer.at/proton/) [[Online Demo](http://drawcall.github.io/Proton/#examples)] - Javascript particle animation library. ![](https://img.shields.io/github/stars/drawcall/Proton?style=social) ![](https://img.shields.io/github/forks/drawcall/Proton?style=social) 339 | - [three.proton](https://github.com/drawcall/three.proton/) [[Online Demo]()] - three.proton is a magical 3d particle engine using three.js library. It is based on the Proton engine library. ![](https://img.shields.io/github/stars/drawcall/three.proton?style=social) ![](https://img.shields.io/github/forks/drawcall/three.proton?style=social) 340 | - [bubbly-bg](https://github.com/tipsy/bubbly-bg) [[Online Demo](https://tipsy.github.io/bubbly-bg/)] - Beautiful bubbly backgrounds in less than 1kB (750 bytes gzipped) ![](https://img.shields.io/github/stars/tipsy/bubbly-bg?style=social) ![](https://img.shields.io/github/forks/tipsy/bubbly-bg?style=social) 341 | - [react-particle-effect-button](https://github.com/transitive-bullshit/react-particle-effect-button) [[Online Demo](https://transitive-bullshit.github.io/react-particle-effect-button/)] - Bursting particle effect buttons for React 🎉 ![](https://img.shields.io/github/stars/transitive-bullshit/react-particle-effect-button?style=social) ![](https://img.shields.io/github/forks/transitive-bullshit/react-particle-effect-button?style=social) 342 | 343 | ### Path animation 344 | - [pasition](https://github.com/dntzhang/pasition) [[Online Demo](https://dntzhang.github.io/pasition/)] - Path Transition with little JS code, render to anywhere. ![](https://img.shields.io/github/stars/dntzhang/pasition?style=social) ![](https://img.shields.io/github/forks/dntzhang/pasition?style=social) 345 | 346 | ### Audio Video 347 | - [canvid](https://github.com/gka/canvid) [[Online Demo](https://gka.github.io/canvid/)] - tiny js library for playing video on canvas elements (without audio) ![](https://img.shields.io/github/stars/gka/canvid?style=social) ![](https://img.shields.io/github/forks/gka/canvid?style=social) 348 | 349 | ### cursor 350 | - [blobity](https://github.com/gmrchk/blobity) [[Online Demo](https://blobity.dev/)] - The cursor is the heart of any interaction with the web. Why not take it to the next level? 🚀 ![](https://img.shields.io/github/stars/gmrchk/blobity?style=social) ![](https://img.shields.io/github/forks/gmrchk/blobity?style=social) 351 | 352 | ### Creativity 353 | - [pts](https://github.com/williamngan/pts) [[Online Demo](https://ptsjs.org/)] - A library for visualization and creative-coding. ![](https://img.shields.io/github/stars/williamngan/pts?style=social) ![](https://img.shields.io/github/forks/williamngan/pts?style=social) 354 | 355 | ### QR code 356 | - [qrious](https://github.com/neocotic/qrious) [[Online Demo](https://github.com/neocotic/qrious#examples)] - Pure JavaScript library for QR code generation using canvas. ![](https://img.shields.io/github/stars/neocotic/qrious?style=social) ![](https://img.shields.io/github/forks/neocotic/qrious?style=social) 357 | - [qrcodejs](https://github.com/davidshimjs/qrcodejs) - Cross-browser QRCode generator for javascript. ![](https://img.shields.io/github/stars/davidshimjs/qrcodejs?style=social) ![](https://img.shields.io/github/forks/davidshimjs/qrcodejs?style=social) 358 | - [node-qrcode](https://github.com/soldair/node-qrcode) - qr code generator ![](https://img.shields.io/github/stars/soldair/node-qrcode?style=social) ![](https://img.shields.io/github/forks/soldair/node-qrcode?style=social) 359 | - [wifi-card](https://github.com/bndw/wifi-card) [[Online Demo](https://wificard.io/)] - 📶 Print a QR code for connecting to your WiFi (wificard.io) ![](https://img.shields.io/github/stars/bndw/wifi-card?style=social) ![](https://img.shields.io/github/forks/bndw/wifi-card?style=social) 360 | - [jsqrcode](https://github.com/LazarSoft/jsqrcode) [[Online Demo](https://webqr.com/)] - Javascript Javascript QRCode scanner. ![](https://img.shields.io/github/stars/LazarSoft/jsqrcode?style=social) ![](https://img.shields.io/github/forks/LazarSoft/jsqrcode?style=social) 361 | - [instascan](https://github.com/schmich/instascan) [[Online Demo](https://schmich.github.io/instascan/)] - HTML5 QR code scanner using your webcam. ![](https://img.shields.io/github/stars/schmich/instascan?style=social) ![](https://img.shields.io/github/forks/schmich/instascan?style=social) 362 | - [qrcode.react](https://github.com/zpao/qrcode.react) - A QRCode component for use with React. ![](https://img.shields.io/github/stars/zpao/qrcode.react?style=social) ![](https://img.shields.io/github/forks/zpao/qrcode.react?style=social) 363 | - [qrbtf](https://github.com/ciaochaos/qrbtf) [[Online Demo](https://qrbtf.com/)] - An art QR code (qrcode) beautifier. ![](https://img.shields.io/github/stars/ciaochaos/qrbtf?style=social) ![](https://img.shields.io/github/forks/ciaochaos/qrbtf?style=social) 364 | - [Awesome-qr.js](https://github.com/SumiMakito/Awesome-qr.js) [[Online Demo]()] - An awesome QR code generator written in JavaScript. ![](https://img.shields.io/github/stars/SumiMakito/Awesome-qr.js?style=social) ![](https://img.shields.io/github/forks/SumiMakito/Awesome-qr.js?style=social) 365 | - [jquery-qrcode](https://github.com/jeromeetienne/jquery-qrcode) - qrcode generation standalone (doesn't depend on external services). ![](https://img.shields.io/github/stars/jeromeetienne/jquery-qrcode?style=social) ![](https://img.shields.io/github/forks/jeromeetienne/jquery-qrcode?style=social) 366 | - [vue-qrcode-reader](https://github.com/gruhn/vue-qrcode-reader) [[Online Demo](https://gruhn.github.io/vue-qrcode-reader/demos/DecodeAll.html)] - A set of Vue.js components for detecting and decoding QR codes. ![](https://img.shields.io/github/stars/gruhn/vue-qrcode-reader?style=social) ![](https://img.shields.io/github/forks/gruhn/vue-qrcode-reader?style=social) 367 | - [weapp-qrcode](https://github.com/yingye/weapp-qrcode) [[Online Demo](https://github.com/yingye/weapp-qrcode#demo)] - Webapp.qrcode.js in wechat applet, quickly generate QR code. ![](https://img.shields.io/github/stars/yingye/weapp-qrcode?style=social) ![](https://img.shields.io/github/forks/yingye/weapp-qrcode?style=social) 368 | - [qr-image](https://github.com/alexeyten/qr-image) - Yet another QR code generator. ![](https://img.shields.io/github/stars/alexeyten/qr-image?style=social) ![](https://img.shields.io/github/forks/alexeyten/qr-image?style=social) 369 | 370 | ### Verification code 371 | - [jigsaw](https://github.com/yeild/jigsaw) [[Online Demo](https://yeild.github.io/jigsaw/demo.html)] - Canvas sliding verification code. ![](https://img.shields.io/github/stars/yeild/jigsaw?style=social) ![](https://img.shields.io/github/forks/yeild/jigsaw?style=social) 372 | - [jq_slideImage](https://www.jq22.com/jquery-info21017) [[Online Demo](https://www.jq22.com/yanshi21017)] - JQuery Slide Puzzle verification plugin. 373 | - [jigsaw](https://www.jq22.com/jquery-info19009) [[Online Demo](https://www.jq22.com/yanshi19009)] - Canvas sliding verification plugin - Jigsaw. 374 | - [JQuery verification-code resources](https://www.jq22.com/search?seo=%E9%AA%8C%E8%AF%81%E7%A0%81) 375 | 376 | ### Runtime 377 | - [node-canvas](https://github.com/Automattic/node-canvas) - Node canvas is a Cairo backed Canvas implementation for NodeJS. ![](https://img.shields.io/github/stars/Automattic/node-canvas?style=social) ![](https://img.shields.io/github/forks/Automattic/node-canvas?style=social) 378 | - [skia-canvas](https://github.com/samizdatco/skia-canvas) - A canvas environment for Node.js ![](https://img.shields.io/github/stars/samizdatco/skia-canvas?style=social) ![](https://img.shields.io/github/forks/samizdatco/skia-canvas?style=social) 379 | - [ExplorerCanvas](https://github.com/arv/ExplorerCanvas) - Canvas for IE8 and older. ![](https://img.shields.io/github/stars/arv/ExplorerCanvas?style=social) ![](https://img.shields.io/github/forks/arv/ExplorerCanvas?style=social) 380 | 381 | ### Others 382 | - [paper.js](http://paperjs.org/) [[Online Demo](http://paperjs.org/examples/)] - The Swiss Army Knife of Vector Graphics Scripting – Scriptographer ported to JavaScript and the browser, using HTML5 Canvas. ![](https://img.shields.io/github/stars/paperjs/paper.js?style=social) ![](https://img.shields.io/github/forks/paperjs/paper.js?style=social) 383 | - [react-canvas](https://github.com/Flipboard/react-canvas) - High performance canvas rendering for React components ![](https://img.shields.io/github/stars/Flipboard/react-canvas?style=social) ![](https://img.shields.io/github/forks/Flipboard/react-canvas?style=social) 384 | - [react-native-canvas](https://github.com/iddan/react-native-canvas) - A Canvas component for React Native. ![](https://img.shields.io/github/stars/iddan/react-native-canvas?style=social) ![](https://img.shields.io/github/forks/iddan/react-native-canvas?style=social) 385 | - [origamijs](https://raphamorim.io/origamijs/docs/) - Powerful and Lightweight Library to create using HTML5 Canvas ![](https://img.shields.io/github/stars/raphamorim/origami.js?style=social) ![](https://img.shields.io/github/forks/raphamorim/origami.js?style=social) 386 | 387 | ## Resources Website 388 | - [CodePen Canvas Resources](https://codepen.io/search/pens?q=canvas) 389 | - [ANIMPEN Canvas Resources](https://animpen.com/search/pens?q=canvas) 390 | - [JQuery之家 Canvas Resources](http://www.htmleaf.com/html5/html5-canvas/) 391 | - [jq22 Canvas Resources](https://www.jq22.com/search?seo=canvas) 392 | - [People You Should Follow on CodePen](https://github.com/nucliweb/People-You-Should-Follow-on-CodePen) 393 | 394 | ## Plugins 395 | - [canvas-confetti](https://github.com/catdad/canvas-confetti) [[Online Demo](https://www.kirilv.com/canvas-confetti/)] - 🎉 on-demand confetti gun. ![](https://img.shields.io/github/stars/catdad/canvas-confetti?style=social) ![](https://img.shields.io/github/forks/catdad/canvas-confetti?style=social) 396 | - [lucky-canvas](https://100px.net/) [[Online Demo](https://100px.net/demo/wheel.html)] - The lottery plugin based on ts + canvas. [big turntable / Jiugongge] developed, rainbow has a set of source code, which is suitable for multi terminal framework JS / Vue / react / taro / uniapp / wechat miniapp, etc. ![](https://img.shields.io/github/stars/buuing/lucky-canvas?style=social) ![](https://img.shields.io/github/forks/buuing/lucky-canvas?style=social) 397 | - [CanvasInput](https://github.com/goldfire/CanvasInput) [[Online Demo](https://goldfirestudios.com/canvasinput-html5-canvas-text-input)] - HTML5 Canvas Text Input. ![](https://img.shields.io/github/stars/goldfire/CanvasInput?style=social) ![](https://img.shields.io/github/forks/goldfire/CanvasInput?style=social) 398 | - [wind-js](https://github.com/Esri/wind-js) [[Online Demo](http://esri.github.io/wind-js/)] - An demo animation of wind on a Canvas layer in the JSAPI. ![](https://img.shields.io/github/stars/Esri/wind-js?style=social) ![](https://img.shields.io/github/forks/Esri/wind-js?style=social) 399 | - [curvejs](https://github.com/AlloyTeam/curvejs) [[Online Demo](https://github.com/AlloyTeam/curvejs#demos)] - Made curve a dancer in HTML5 canvas. ![](https://img.shields.io/github/stars/AlloyTeam/curvejs?style=social) ![](https://img.shields.io/github/forks/AlloyTeam/curvejs?style=social) 400 | - [canvas-nest.js](https://github.com/hustcc/canvas-nest.js/blob/master/README-zh.md) - ♋ Interactive Particle / Nest System With JavaScript and Canvas, no jQuery. ![](https://img.shields.io/github/stars/hustcc/canvas-nest.js?style=social) ![](https://img.shields.io/github/forks/hustcc/canvas-nest.js?style=social) 401 | - [canvas-special](https://github.com/bxm0927/) - There are many classic canvas examples, such as dynamic ion background, colorful small ball, greedy snake, tank war, 100 floors down for men, heart-shaped text, etc. ![](https://img.shields.io/github/stars/bxm0927/canvas-special?style=social) ![](https://img.shields.io/github/forks/bxm0927/canvas-special?style=social) 402 | - [canvas demos](https://github.com/sunshine940326/canvas) ![](https://img.shields.io/github/stars/sunshine940326/canvas?style=social) ![](https://img.shields.io/github/forks/sunshine940326/canvas?style=social) 403 | - [shape-shifter](https://github.com/kennethcachia/shape-shifter) [[Online Demo](http://www.kennethcachia.com/shape-shifter/)] - A canvas experiment in which a set of particles is used to render different shapes based on the user's input. It supports multiple modes: text, countdown, time and icons. ![](https://img.shields.io/github/stars/kennethcachia/shape-shifter?style=social) ![](https://img.shields.io/github/forks/kennethcachia/shape-shifter?style=social) 404 | - [canvas-test](https://github.com/whxaxes/canvas-test) - some cnavas demo. 405 | 406 | ## Articles 407 | - [可视化私房菜](https://www.yuque.com/antv/blog/2021s2) - 可视化国家队的私房菜，用心烹调，以飨读者。 408 | - [体系化建设 BI 业务定制图表](https://www.yuque.com/antv/vis-library) 409 | - [图可视化知多少](https://www.yuque.com/antv/g6-blog) - 图可视化、图分析及图编辑知识库。 410 | - [G2Plot 可视化圈子](https://www.yuque.com/antv/g2plot) 411 | - [G2：图形、交互语法](https://www.yuque.com/antv/g2-docs) 412 | - [可视化小讲堂](https://www.yuque.com/antv/gvvtcf) 413 | - [如何看待 Google Docs 将从 HTML 迁移到基于 Canvas 渲染？](https://www.zhihu.com/question/459251463) - @知乎 海蓝 414 | - [用Canvas画一只会跟着鼠标走的小狗](https://zhuanlan.zhihu.com/p/34139676) - @知乎 李银城 415 | - [用Canvas + WASM画一个迷宫](https://zhuanlan.zhihu.com/p/28203300) - @知乎 李银城 416 | - [玩转「Canvas」](https://www.bianchengquan.com/article/140323.html) - 编程圈 @糖少 417 | - [JS之使用Canvas绘图](https://www.jianshu.com/p/802c3bd2df34) - 简书 @LemonnYan 418 | - [一个少女心满满的例子带你入门 Canvas](https://juejin.cn/post/6844903490020442125) - Juejin @sunshine小小倩 419 | - [为了让她10分钟入门canvas，我熬夜写了3个小项目和这篇文章](https://juejin.cn/post/6986785259966857247) - Juejin @Sunshine_Lin 420 | - [更优雅地基于 canvas 在前端画海报](https://juejin.cn/post/6844903870276206606) - Juejin @2dunn 421 | - [【🎨万物皆可动】详解Canvas路径动画](https://juejin.cn/post/6924866572972457992)- Juejin @ChanningHyl 422 | - [产品经理：你能不能用div给我画条龙？](https://juejin.cn/post/6963476650356916254) - Juejin @大帅老猿 423 | - [Canvas性能优化](https://juejin.cn/post/6844903682761310216) - Juejin @清夜 424 | - [为了让你们进阶Canvas，我花7小时写了3个有趣的小游戏！！！](https://juejin.cn/post/6989003710030413838) - Juejin @Sunshine_Lin 425 | - [十分钟实现灭霸打响指灰飞烟灭的效果](https://juejin.cn/post/6844903840249020429) - Juejin @wangzy2019 426 | - [匠心打造canvas签名组件](http://louiszhai.github.io/2017/07/07/canvas-draw/) - @路易斯 427 | 428 | ## Contributor 429 | 430 | Thank the following people for their contributions to the project. 431 | 432 | - [zyf214329704](https://github.com/zyf214329704) 433 | 434 | ## License 435 | 436 | [MIT](./LICENSE) 437 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![](./assets/logo.png) 2 | ## awesome-canvas 3 | 精心收录Canvas相关的资源并整理分类，部分同类资源库也收录SVG/WebGL相关的资源。 4 | 5 | 目前最好的Canvas中文资源，项目还在持续收录中...... 6 | 7 | 简体中文 | [English](./README-EN.md) 8 | 9 | ## 目录 10 | 11 | - [awesome-canvas](#awesome-canvas) 12 | - [目录](#目录) 13 | - [教程](#教程) 14 | - [书籍](#书籍) 15 | - [仓库](#仓库) 16 | - [图形绘制](#图形绘制) 17 | - [3D库](#3d库) 18 | - [VR/AR](#vrar) 19 | - [物理引擎](#物理引擎) 20 | - [游戏引擎](#游戏引擎) 21 | - [流程图](#流程图) 22 | - [甘特图](#甘特图) 23 | - [组织图](#组织图) 24 | - [UML](#uml) 25 | - [图编辑](#图编辑) 26 | - [电子表格](#电子表格) 27 | - [图表库](#图表库) 28 | - [海报截图](#海报截图) 29 | - [数据处理](#数据处理) 30 | - [图像处理](#图像处理) 31 | - [滤镜](#滤镜) 32 | - [画板](#画板) 33 | - [签名](#签名) 34 | - [波纹动画](#波纹动画) 35 | - [粒子动画](#粒子动画) 36 | - [路径动画](#路径动画) 37 | - [音视频](#音视频) 38 | - [光标](#光标) 39 | - [创意](#创意) 40 | - [二维码](#二维码) 41 | - [验证码](#验证码) 42 | - [运行时](#运行时) 43 | - [其他](#其他) 44 | - [插件资源网站](#插件资源网站) 45 | - [效果/案例](#效果案例) 46 | - [文章](#文章) 47 | - [贡献者](#贡献者) 48 | - [协议](#协议) 49 | 50 | ## 教程 51 | - [Web绘图](https://airingursb.gitbooks.io/canvas/content/) 52 | - [图可视化美学](https://www.researchgate.net/publication/220795329_The_Aesthetics_of_Graph_Visualization) 53 | - [计算机图形与可视化](https://ng-tech.icu/CGDataVis-Series/#/) 54 | - [HTML5 Canvas MDN教程](https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API) 55 | - [Internet Explorer 9 开发人员指南：HTML5 Canvas](https://docs.microsoft.com/en-us/previous-versions/hh410106(v=msdn.10)?redirectedfrom=MSDN#_HTML5_canvas) 56 | - [HTML5草案标准中的Canvas元素文档](https://html.spec.whatwg.org/multipage/canvas.html#the-canvas-element) 57 | - [HTML5 Canvas 基础教程](https://dev.opera.com/articles/html5-canvas-basics/) 58 | - [HTML5 Canvas 菜鸟教程](https://www.runoob.com/html/html5-canvas.html) 59 | - [HTML5 Canvas W3school教程](https://www.w3school.com.cn/html/html5_canvas.asp) 60 | - [HTML5 Canvas 廖雪峰教程](https://www.liaoxuefeng.com/wiki/1022910821149312/1023022423592576) 61 | - [HTML5 Canvas 慕课网教程](https://www.imooc.com/wiki/html5/canvas.html) 62 | - [HTML5 Canvas的中文系列学习教程](https://github.com/827652549/CanvasStudy) 63 | - [AntV Graphin 图数据库解决方案](https://graphin.antv.vision/solution/database/graph-database) 64 | - [AntV Graphin 知识图谱解决方案](https://graphin.antv.vision/solution/knowledge-graph) 65 | - [AntV Graphin 网络安全解决方案](https://graphin.antv.vision/solution/security) 66 | - [AntV Graphin 企业风控解决方案](https://graphin.antv.vision/solution/enterprise/enterprise-risk-control) 67 | 68 | ## 书籍 69 | - 《[HTML5 Canvas开发详解](http://product.dangdang.com/11012245144.html)》 作者: Steve Fulton,Jeff Fulton [链接地址🔗](http://product.dangdang.com/11012245144.html) 70 | - 《[TypeScript图形渲染实战：2D架构设计与实现](http://product.dangdang.com/28499406.html)》 作者: 步磊峰 [链接地址🔗](http://product.dangdang.com/28499406.html) 71 | - 《[HTML5 Canvas核心技术：图形、动画与游戏开发](https://item.jd.com/11312007.html?cu=true&utm_source=kong&utm_medium=tuiguang&utm_campaign=t_1001542270_53285100_0_1932113745&utm_term=2f9a0a9984c64a1983d8e5eff928839a)》 作者: David Geary 72 | - 《[HTML5 2D游戏编程核心技术](https://item.jd.com/25570817493.html?cu=true&utm_source=kong&utm_medium=tuiguang&utm_campaign=t_1001542270_53285100_0_1932113745&utm_term=ea99fc143d004c78b5b3bd12381b357e)》 作者: David Geary 73 | - 《[HTML5 Canvas游戏开发实战](http://e.dangdang.com/products/1900396102.html)》 作者: 张路斌 [链接地址🔗](http://e.dangdang.com/products/1900396102.html) 74 | - 《[从0到1 HTML5 Canvas动画开发](http://product.dangdang.com/28549249.html)》 作者: 莫振杰 [链接地址🔗](http://product.dangdang.com/28549249.html) 75 | - 《[HTML5 Canvas核心技术: 图形、动画与游戏开发](http://product.dangdang.com/1798930436.html)》 作者: 美基瑞 [链接地址🔗](http://product.dangdang.com/1798930436.html) 76 | - 《[快学熟用D3](http://product.dangdang.com/28556039.html)》 作者: 菲利普·K.贾纳特 [链接地址🔗](http://product.dangdang.com/28556039.html) 77 | - 《[如何使用 Canvas 制作出炫酷的网页背景特效](https://juejin.cn/book/6844723714655780871)》 作者: sunshine小小倩 [链接地址🔗](https://juejin.cn/book/6844723714655780871) 78 | - 《[可视化入门：从 0 到 1 开发一个图表库](https://juejin.cn/book/7031893648145186824)》 作者: AntV [链接地址🔗](https://juejin.cn/book/7031893648145186824) 79 | - 《[图分析与可视化](https://book.douban.com/subject/26756024/)》 作者: 理查德·布莱斯 / 大卫·琼克 [链接地址🔗](https://book.douban.com/subject/26756024/) 80 | - 《[视觉繁美 - 信息可视化方法与案例解析](https://book.douban.com/subject/25665238/)》 作者: Manuel Lima [链接地址🔗](https://book.douban.com/subject/25665238/) 81 | - 《[数据可视化](https://book.douban.com/subject/25760272/)》 作者: 陈为 / 沈则潜 [链接地址🔗](https://book.douban.com/subject/25760272/) 82 | - 《[从0-1入门数据可视化](https://wzf1997.github.io/learn-visualization/blog/three/3dearth.html)》 作者: Fly 83 | 84 | ## 仓库 85 | ### 图形绘制 86 | - [fabric.js](http://fabricjs.com/) [[在线演示](http://fabricjs.com/demos/)] - 轻松处理Canvas元素的框架、Canvas和SVG的转换解析器 ![](https://img.shields.io/github/stars/fabricjs/fabric.js?style=social) ![](https://img.shields.io/github/forks/fabricjs/fabric.js?style=social) 87 | - [DarkroomJS](https://github.com/MattKetmo/darkroomjs) [[在线演示](https://pqina.nl/pintura/?affiliate_id=854594675)] - 浏览器端可扩展的图像编辑工具 ![](https://img.shields.io/github/stars/MattKetmo/darkroomjs?style=social) ![](https://img.shields.io/github/forks/MattKetmo/darkroomjs?style=social) 88 | - [react-design-editor](https://github.com/salgum1114/react-design-editor) [[在线演示](https://salgum1114.github.io/react-design-editor/)] - 基于React、Fabricjs的编辑设计工具 ![](https://img.shields.io/github/stars/salgum1114/react-design-editor?style=social) ![](https://img.shields.io/github/forks/salgum1114/react-design-editor?style=social) 89 | - [vue-fabric-editor](https://github.com/nihaojob/vue-fabric-editor) [[在线演示](https://nihaojob.github.io/vue-fabric-editor/)] - 基于Vue、Fabricjs的编辑设计工具 ![](https://img.shields.io/github/stars/nihaojob/vue-fabric-editor?style=social) ![](https://img.shields.io/github/forks/nihaojob/vue-fabric-editor?style=social) 90 | - [react-sketch](https://github.com/tbolis/react-sketch) [[在线演示](http://tbolis.github.io/showcase/react-sketch/)] - 基于React、Fabricjs的素描应用 ![](https://img.shields.io/github/stars/tbolis/react-sketch?style=social) ![](https://img.shields.io/github/forks/tbolis/react-sketch?style=social) 91 | - [vue-fabric](https://github.com/purestart/vue-fabric) - 基于Fabric.js的Vue组件，定制画板，图片组合绘制 ![](https://img.shields.io/github/stars/purestart/vue-fabric?style=social) ![](https://img.shields.io/github/forks/purestart/vue-fabric?style=social) 92 | - [angular-fabric](https://github.com/michaeljcalkins/angular-fabric) [[在线演示](https://codepen.io/michaeljcalkins/full/Imupw)] - 使用AngularJS控制Fabricjs Canvas ![](https://img.shields.io/github/stars/michaeljcalkins/angular-fabric?style=social) ![](https://img.shields.io/github/forks/michaeljcalkins/angular-fabric?style=social) 93 | - [fabric-js-editor](https://github.com/danielktaylor/fabric-js-editor) - 基于Fabric.js的HTML5矢量图像编辑器 ![](https://img.shields.io/github/stars/danielktaylor/fabric-js-editor?style=social) ![](https://img.shields.io/github/forks/danielktaylor/fabric-js-editor?style=social) 94 | - [fabric-brush](https://github.com/tennisonchan/fabric-brush) [[在线演示](https://tennisonchan.github.io/fabric-brush/)] - 基于Fabric.js的Canvas笔刷工具 ![](https://img.shields.io/github/stars/tennisonchan/fabric-brush?style=social) ![](https://img.shields.io/github/forks/tennisonchan/fabric-brush?style=social) 95 | - [fabricjs-image-editor-origin](https://github.com/pegasus1982/fabricjs-image-editor-origin) [[在线演示](https://fabricjs-image-editor-f62330.netlify.app/)] - Fabricjs图像编辑器 ![](https://img.shields.io/github/stars/pegasus1982/fabricjs-image-editor-origin?style=social) ![](https://img.shields.io/github/forks/pegasus1982/fabricjs-image-editor-origin?style=social) 96 | - [DrawerJs](https://github.com/carstenschaefer/DrawerJs) [[在线演示](https://carstenschaefer.github.io/DrawerJs/examples/standalone/)] - 可定制的所见即所得的HTML Canvas编辑器 ![](https://img.shields.io/github/stars/carstenschaefer/DrawerJs?style=social) ![](https://img.shields.io/github/forks/carstenschaefer/DrawerJs?style=social) 97 | - [myvision](https://github.com/OvidijusParsiunas/myvision) - 免费的在线图像注释工具，用于生成基于计算机视觉的 ML 训练数据 ![](https://img.shields.io/github/stars/OvidijusParsiunas/myvision?style=social) ![](https://img.shields.io/github/forks/OvidijusParsiunas/myvision?style=social) 98 | - [konva](https://konvajs.org/) [[在线演示](https://konvajs.org/docs/sandbox/index.html)] - 通过扩展2D Context让桌面和移动端Canvas支持交互特性 ![](https://img.shields.io/github/stars/konvajs/konva?style=social) ![](https://img.shields.io/github/forks/konvajs/konva?style=social) 99 | - [konva中文文档](http://konvajs-doc.bluehymn.com/docs/) 100 | - [react-konva](https://konvajs.org/) [[在线演示](https://codesandbox.io/s/5m3nwp787x)] - 基于React和[konva](https://konvajs.org/)绘制复杂Canvas图形的JS库 ![](https://img.shields.io/github/stars/konvajs/react-konva?style=social) ![](https://img.shields.io/github/forks/konvajs/react-konva?style=social) 101 | - [vue-konva](https://github.com/konvajs/vue-konva) - 基于Vue和[konva](https://konvajs.org/)绘制复杂canvas图形的JS库 ![](https://img.shields.io/github/stars/konvajs/vue-konva?style=social) ![](https://img.shields.io/github/forks/konvajs/vue-konva?style=social) 102 | - [react-proto](https://github.com/React-Proto/react-proto) - 为开发人员和设计人员的React原型工具应用 ![](https://img.shields.io/github/stars/React-Proto/react-proto?style=social) ![](https://img.shields.io/github/forks/React-Proto/react-proto?style=social) 103 | - [two.js](https://two.js.org/#introduction) [[在线演示](https://two.js.org/examples/)] - 一个渲染器无关的Web 2D绘图API ![](https://img.shields.io/github/stars/jonobr1/two.js?style=social) ![](https://img.shields.io/github/forks/jonobr1/two.js?style=social) 104 | - [EaselJS](https://www.createjs.com/getting-started/easeljs) - EaselJS是一个用于在HTML5中构建高性能交互式2D内容的库 ![](https://img.shields.io/github/stars/CreateJS/EaselJS?style=social) ![](https://img.shields.io/github/forks/CreateJS/EaselJS?style=social) 105 | - [spritejs](https://spritejs.org/#/) [[在线演示](https://spritejs.org/demo/)] - 一个跨平台的高性能图形系统 ![](https://img.shields.io/github/stars/spritejs/spritejs?style=social) ![](https://img.shields.io/github/forks/spritejs/spritejs?style=social) 106 | - [concretejs](http://www.concretejs.com/) [[在线演示](http://www.concretejs.com/#examples)]- 超快、轻量的Canvas框架，支持hit检测、分层、像素比率管理、导出和下载 ![](https://img.shields.io/github/stars/ericdrowell/concrete?style=social) 107 | - [cax](https://github.com/dntzhang/cax/blob/master/README.CN.md) [[在线演示](https://github.com/dntzhang/cax/blob/master/README.CN.md)] - 小程序、小游戏以及 Web 通用 Canvas 渲染引擎 ![](https://img.shields.io/github/stars/dntzhang/cax?style=social) ![](https://img.shields.io/github/forks/dntzhang/cax?style=social) 108 | - [wxDraw](https://bobiscool.github.io/wxDrawDocs/#/) [[在线演示](https://github.com/bobiscool/wxDraw#wxdraw%E5%88%9B%E4%BD%9C%E7%9A%84%E5%8A%A8%E7%94%BB%E6%BC%94%E7%A4%BA)] - 微信小程序2d动画库 ![](https://img.shields.io/github/stars/bobiscool/wxDraw?style=social) ![](https://img.shields.io/github/forks/bobiscool/wxDraw?style=social) 109 | - [atrament.js](https://github.com/jakubfiala/atrament.js) - 一个小型 JS 库，用于在 HTML Canvas 上进行漂亮的绘图和手绘 ![](https://img.shields.io/github/stars/jakubfiala/atrament.js?style=social) ![](https://img.shields.io/github/forks/jakubfiala/atrament.js?style=social) 110 | - [origami.js](https://raphamorim.io/origamijs/docs/) - 强大且轻量的Canvas库 ![](https://img.shields.io/github/stars/raphamorim/origami.js?style=social) ![](https://img.shields.io/github/forks/raphamorim/origami.js?style=social) 111 | - [react-native-sketch-canvas](https://github.com/terrylinla/react-native-sketch-canvas) [[在线演示]()] - 支持在iOS和Android上触摸绘图React Native组件 ![](https://img.shields.io/github/stars/terrylinla/react-native-sketch-canvas?style=social) ![](https://img.shields.io/github/forks/terrylinla/react-native-sketch-canvas?style=social) 112 | - [mesh.js](https://github.com/mesh-js/mesh.js) [[在线演示](https://meshjs.webgl.group/demo/#/docs/index)] - 为可视化而生的图形系统 ![](https://img.shields.io/github/stars/mesh-js/mesh.js?style=social) ![](https://img.shields.io/github/forks/mesh-js/mesh.js?style=social) 113 | - [taro-plugin-canvas](https://github.com/chuyun/taro-plugin-canvas) - 基于 Taro 框架的微信小程序 canvas 绘图组件，封装了常用的操作，通过配置的方式生成分享图片 ![](https://img.shields.io/github/stars/chuyun/taro-plugin-canvas?style=social) ![](https://img.shields.io/github/forks/chuyun/taro-plugin-canvas?style=social) 114 | - [pencil.js](https://github.com/pencil-js/pencil.js) [[在线演示](https://pencil.js.org/)] - 一款很棒的模块化2D交互式绘图库 ![](https://img.shields.io/github/stars/pencil-js/pencil.js?style=social) ![](https://img.shields.io/github/forks/pencil-js/pencil.js?style=social) 115 | - [p5.js]( https://github.com/processing/p5.js) [[在线演示](https://p5js.org/zh-Hans/examples/)] - JS客户端库，用于创建图形和交互体验库 ![](https://img.shields.io/github/stars/processing/p5.js?style=social) ![](https://img.shields.io/github/forks/processing/p5.js?style=social) 116 | ### 3D库 117 | - [three.js](https://github.com/mrdoob/three.js) [[在线演示](https://threejs.org/examples/)] - 创建易于使用、轻量级、跨浏览器的通用3d js库 ![](https://img.shields.io/github/stars/mrdoob/three.js?style=social) ![](https://img.shields.io/github/forks/mrdoob/three.js?style=social) 118 | - [zdog](https://github.com/metafizzy/zdog) [[在线演示](https://zzz.dog/)] - 基于canvas和SVG设计师友好的伪3D引擎 ![](https://img.shields.io/github/stars/metafizzy/zdog?style=social) ![](https://img.shields.io/github/forks/metafizzy/zdog?style=social) 119 | - [curtainsjs](https://www.curtainsjs.com/get-started.html) [[在线演示](https://www.curtainsjs.com/get-started.html#basic-setup)] - 轻量级的WebGL库，将DOM元素转换为交互式纹理平面 ![](https://img.shields.io/github/stars/martinlaxenaire/curtainsjs?style=social) ![](https://img.shields.io/github/forks/martinlaxenaire/curtainsjs?style=social) 120 | - [obelisk.js](https://github.com/nosir/obelisk.js) - 用HTML5 canvas构建立体图形库 ![](https://img.shields.io/github/stars/nosir/obelisk.js?style=social) ![](https://img.shields.io/github/forks/nosir/obelisk.js?style=social) 121 | - [seen](http://seenjs.io/) [[在线演示](http://seenjs.io/demo-simple-interactive.html)] - 使用SVG或Canvas渲染3D场景 ![](https://img.shields.io/github/stars/themadcreator/seen?style=social) ![](https://img.shields.io/github/forks/themadcreator/seen?style=social) 122 | - [Oimo.js](https://github.com/lo-th/Oimo.js) [[在线演示](http://lo-th.github.io/Oimo.js/index.html#basic)] - 轻量级的JS 3D物理引擎 ![](https://img.shields.io/github/stars/lo-th/Oimo.js?style=social) ![](https://img.shields.io/github/forks/lo-th/Oimo.js?style=social) 123 | - [troika](https://protectwise.github.io/troika/) [[在线演示]()] - 用于交互式 3D 和 2D 可视化的 JavaScript 框架 ![](https://img.shields.io/github/stars/protectwise/troika?style=social) ![](https://img.shields.io/github/forks/protectwise/troika?style=social) 124 | - [phoria.js](https://github.com/kevinroast/phoria.js) [[在线演示](http://www.kevs3d.co.uk/dev/phoria/index.html)] - 用于在 HTML5 画布 2D 渲染器上进行简单 3D 图形和可视化的 JavaScript 库。它不使用 WebGL。适用于所有 HTML5 浏览器，包括桌面、iOS 和 Android ![](https://img.shields.io/github/stars/kevinroast/phoria.js?style=social) ![](https://img.shields.io/github/forks/kevinroast/phoria.js?style=social) 125 | - [isomer](https://github.com/jdan/isomer) [[在线示例](http://jdan.github.io/isomer/)] - 基于HTML5 Canvas的简单等距图形库。 ![](https://img.shields.io/github/stars/jdan/isomer?style=social) ![](https://img.shields.io/github/forks/jdan/isomer?style=social) 126 | 127 | ### VR/AR 128 | - [Panolens.js](https://github.com/pchen66/panolens.js) [[在线演示](https://pchen66.github.io/Panolens/)] - Panolens.js基于Three.JS，主要研究领域是全景、虚拟现实和潜在的增强现实。 ![](https://img.shields.io/github/stars/pchen66/panolens.js?style=social) ![](https://img.shields.io/github/forks/pchen66/panolens.js?style=social) 129 | - [Pannellum](https://github.com/mpetroff/pannellum) [[在线演示](https://pannellum.org/)] - 轻量、免费、开源的web全景查看器。 ![](https://img.shields.io/github/stars/mpetroff/pannellum?style=social) ![](https://img.shields.io/github/forks/mpetroff/pannellum?style=social) 130 | - [Marzipano](https://github.com/google/marzipano) [[在线演示](https://www.marzipano.net/demos/sample-tour/)] 可让您轻松为您的网站创建 360 度媒体播放器。 ![](https://img.shields.io/github/stars/google/marzipano?style=social) ![](https://img.shields.io/github/forks/google/marzipano?style=social) 131 | - [JS-Cloudimage-360-View](https://github.com/scaleflex/js-cloudimage-360-view) [[在线演示](https://scaleflex.github.io/js-cloudimage-360-view/)] 一个简单的、交互式的资源，可以用来提供您的产品的虚拟游览。 ![](https://img.shields.io/github/stars/scaleflex/js-cloudimage-360-view?style=social) ![](https://img.shields.io/github/forks/scaleflex/js-cloudimage-360-view?style=social) 132 | - [A-Frame](https://github.com/aframevr/aframe) [[在线演示](https://aframe.io/)] A-Frame 除了帮助您构建 360 度媒体播放器外，它还提供了许多附加功能。其他功能可帮助您增强网站的虚拟现实体验。 ![](https://img.shields.io/github/stars/aframevr/aframe?style=social) ![](https://img.shields.io/github/forks/aframevr/aframe?style=social) 133 | - [exokit](https://github.com/exokitxr/exokit) [[在线演示](https://exokit.org/)] - 基于JavaScript的原生VR / AR / XR引擎 ![](https://img.shields.io/github/stars/exokitxr/exokit?style=social) ![](https://img.shields.io/github/forks/exokitxr/exokit?style=social) 134 | - [webvr-boilerplate](https://github.com/borismus/webvr-boilerplate) [[在线演示](https://borismus.github.io/webvr-boilerplate/#)] - 工作在VR头戴设备的基于Web的VR虚拟体验 ![](https://img.shields.io/github/stars/borismus/webvr-boilerplate?style=social) ![](https://img.shields.io/github/forks/borismus/webvr-boilerplate?style=social) 135 | 136 | ### 物理引擎 137 | - [matter-js](https://brm.io/matter-js/) [[在线演示](https://brm.io/matter-js/demo/#mixed)] - 用于web的2D刚体物理引擎 ![](https://img.shields.io/github/stars/liabru/matter-js?style=social) ![](https://img.shields.io/github/forks/liabru/matter-js?style=social) 138 | - [box2d.js](https://github.com/kripken/box2d.js) [[在线示例](http://kripken.github.io/box2d.js/demo/webgl/box2d.html)] - box2d.js是Box2D物理引擎的JS版本。 ![](https://img.shields.io/github/stars/kripken/box2d.js?style=social) ![](https://img.shields.io/github/forks/kripken/box2d.js?style=social) 139 | - [p2.js](https://github.com/schteppe/p2.js) [[在线演示](http://schteppe.github.io/p2.js/demos/springs.html)] - JavaScript 2D 物理引擎库。 ![](https://img.shields.io/github/stars/schteppe/p2.js?style=social) ![](https://img.shields.io/github/forks/schteppe/p2.js?style=social) 140 | - [planck.js](https://github.com/shakiba/planck.js) [[在线演示](https://piqnt.com/planck.js/)] - 2D JS物理引擎 ![](https://img.shields.io/github/stars/shakiba/planck.js?style=social) ![](https://img.shields.io/github/forks/shakiba/planck.js?style=social) 141 | 142 | ### 游戏引擎 143 | - [Hilo](https://github.com/hiloteam/Hilo/blob/dev/README_ZH.md) [[在线演示](https://hiloteam.github.io/examples/index.html)] - 阿里巴巴集团开发的跨平台HTML5游戏开发解决方案 ![](https://img.shields.io/github/stars/hiloteam/Hilo?style=social) ![](https://img.shields.io/github/forks/hiloteam/Hilo?style=social) 144 | - [melonJS](https://melonjs.org/) [[在线演示](https://www.melongaming.com/)] - 一个全新的轻量级javascript游戏引擎 ![](https://img.shields.io/github/stars/melonjs/melonJS?style=social) ![](https://img.shields.io/github/forks/melonjs/melonJS?style=social) 145 | - [Babylon.js](https://github.com/BabylonJS/Babylon.js) [[在线演示](https://www.babylonjs.com/community/)] - 功能强大、美观、简单、开源、封装友好的游戏渲染引擎 ![](https://img.shields.io/github/stars/BabylonJS/Babylon.js?style=social) ![](https://img.shields.io/github/forks/BabylonJS/Babylon.js?style=social) 146 | - [taro](https://github.com/Cloud9c/taro) [[在线演示](https://www.echou.xyz/taro/examples/#Cube)] - 轻量级3D游戏引擎。 ![](https://img.shields.io/github/stars/Cloud9c/taro?style=social) ![](https://img.shields.io/github/forks/Cloud9c/taro?style=social) 147 | - [turbulenz_engine](https://github.com/turbulenz/turbulenz_engine) [[在线演示](http://biz.turbulenz.com/samples)] - 用于浏览器PC端和移动端模块化的3D/2D H5游戏框架 ![](https://img.shields.io/github/stars/turbulenz/turbulenz_engine?style=social) ![](https://img.shields.io/github/forks/turbulenz/turbulenz_engine?style=social) 148 | - [eva.js](https://github.com/eva-engine/eva.js) [[在线演示](https://eva.js.org/playground/#/resource)] - 专注于开发互动游戏项目的前端游戏引擎 ![](https://img.shields.io/github/stars/eva-engine/eva.js?style=social) ![](https://img.shields.io/github/forks/eva-engine/eva.js?style=social) 149 | - [PlayCanvas](https://github.com/playcanvas/engine) [[在线演示](https://playcanvas.github.io/#/)] - 使用H5和WebGL技术以及其他3D内容的开源游戏引擎 ![](https://img.shields.io/github/stars/playcanvas/engine?style=social) ![](https://img.shields.io/github/forks/playcanvas/engine?style=social) 150 | - [Sketchbook](https://github.com/swift502/Sketchbook) [[在线演示](https://jblaha.art/sketchbook/0.4/)] - 基于three.js和cannon.js的3D游乐场 ![](https://img.shields.io/github/stars/swift502/Sketchbook?style=social) ![](https://img.shields.io/github/forks/swift502/Sketchbook?style=social) 151 | - [Sein.js](https://github.com/hiloteam/Sein.js) [[在线演示](https://seinjs.com/cn/example/start/start)]- 渐进式网页3D游戏引擎 ![](https://img.shields.io/github/stars/hiloteam/Sein.js?style=social) ![](https://img.shields.io/github/forks/hiloteam/Sein.js?style=social) 152 | - [PuzzleScript](https://github.com/increpare/PuzzleScript) [[在线演示](https://www.puzzlescript.net/)] - 开源HTML5益智游戏引擎 ![](https://img.shields.io/github/stars/increpare/PuzzleScript?style=social) ![](https://img.shields.io/github/forks/increpare/PuzzleScript?style=social) 153 | - [LittleJS](https://github.com/KilledByAPixel/LittleJS) [[在线演示](https://killedbyapixel.github.io/LittleJS/examples/puzzle/)] - 极小的js游戏引擎 ![](https://img.shields.io/github/stars/KilledByAPixel/LittleJS?style=social) ![](https://img.shields.io/github/forks/KilledByAPixel/LittleJS?style=social) 154 | - [Black](https://github.com/MassiveHeights/Black) [[在线演示](https://blacksmith2d.io/Docs/Examples)] - 世界上最快的H5 2D游戏引擎 ![](https://img.shields.io/github/stars/MassiveHeights/Black?style=social) ![](https://img.shields.io/github/forks/MassiveHeights/Black?style=social) 155 | - [pixijs](https://github.com/pixijs/pixijs) [[在线演示](https://www.goodboydigital.com/pixijs/storm/?base=pixijs&category=storm)] - H5创建引擎，创建精美数字内容最快、最灵活的2D WebGL渲染器 ![](https://img.shields.io/github/stars/pixijs/pixijs?style=social) ![](https://img.shields.io/github/forks/pixijs/pixijs?style=social) 156 | - [stage.js](https://github.com/shakiba/stage.js) [[在线演示](https://piqnt.com/stage.js/)] - 用于游戏开发的2D HTML5渲染和布局引擎 ![](https://img.shields.io/github/stars/shakiba/stage.js?style=social) ![](https://img.shields.io/github/forks/shakiba/stage.js?style=social) 157 | - [Excalibur](https://github.com/excaliburjs/Excalibur) [[在线演示](https://excaliburjs.com/samples/)] - 使用TS编写的易于使用的2D H5游戏引擎 ![](https://img.shields.io/github/stars/excaliburjs/Excalibur?style=social) ![](https://img.shields.io/github/forks/excaliburjs/Excalibur?style=social) 158 | - [Akihabara](https://github.com/kesiev/akihabara) [[在线演示](http://www.kesiev.com/akihabara/)] - 制作经典街机风格游戏的游戏引擎 ![](https://img.shields.io/github/stars/kesiev/akihabara?style=social) ![](https://img.shields.io/github/forks/kesiev/akihabara?style=social) 159 | - [iioEngine](https://github.com/sbiermanlytle/iioEngine) [[在线演示](http://iioengine.com/)] - HTML5 Canvas的Js游戏引擎 ![](https://img.shields.io/github/stars/sbiermanlytle/iioEngine?style=social) ![](https://img.shields.io/github/forks/sbiermanlytle/iioEngine?style=social) 160 | - [cocos2d-js](https://github.com/cocos2d/cocos2d-js) [[在线演示](https://www.cocos.com/)] JS版本的cocos2d-x游戏引擎 ![](https://img.shields.io/github/stars/cocos2d/cocos2d-js?style=social) ![](https://img.shields.io/github/forks/cocos2d/cocos2d-js?style=social) 161 | - [Phaser](https://github.com/photonstorm/phaser) [[在线演示](https://phaser.io/examples)] - 用于桌面和移动端H5游戏制作的2D游戏框架 ![](https://img.shields.io/github/stars/photonstorm/phaser?style=social) ![](https://img.shields.io/github/forks/photonstorm/phaser?style=social) 162 | - [phaser-examples](https://github.com/photonstorm/phaser-examples) - 包含数百个Phaser HTML5 游戏框架的源代码示例 ![](https://img.shields.io/github/stars/photonstorm/phaser-examples?style=social) ![](https://img.shields.io/github/forks/photonstorm/phaser-examples?style=social) 163 | - [games](https://github.com/channingbreeze/games) - 一个基于Phaser的小游戏集合 ![](https://img.shields.io/github/stars/channingbreeze/games?style=social) ![](https://img.shields.io/github/forks/channingbreeze/games?style=social) 164 | - [phaser3-examples](https://github.com/photonstorm/phaser3-examples) - phaser3例子 ![](https://img.shields.io/github/stars/photonstorm/phaser3-examples?style=social) ![](https://img.shields.io/github/forks/photonstorm/phaser3-examples?style=social) 165 | - [phaser-ce](https://github.com/photonstorm/phaser-ce) - 有趣、开源、快速且支持Canvas和WebGL渲染的H5 2D游戏框架 ![](https://img.shields.io/github/stars/photonstorm/phaser-ce?style=social) ![](https://img.shields.io/github/forks/photonstorm/phaser-ce?style=social) 166 | - [phaser3-project-template](https://github.com/photonstorm/phaser3-project-template) - Phaser3项目模板 ![](https://img.shields.io/github/stars/photonstorm/phaser3-project-template?style=social) ![](https://img.shields.io/github/forks/photonstorm/phaser3-project-template?style=social) 167 | - [hex-engine](https://github.com/suchipi/hex-engine) [[在线演示](https://hex-engine.dev/docs/examples)] - 一个现代的浏览器2D游戏引擎 ![](https://img.shields.io/github/stars/suchipi/hex-engine?style=social) ![](https://img.shields.io/github/forks/suchipi/hex-engine?style=social) 168 | 169 | ### 流程图 170 | - [GOJS](https://gojs.net/latest/index.html) [[在线演示](https://gojs.net/latest/samples/)] - 用于流程图、组织图、设计工具、可视化语言等的JS图表库 ![](https://img.shields.io/github/stars/NorthwoodsSoftware/GoJS?style=social) ![](https://img.shields.io/github/forks/NorthwoodsSoftware/GoJS?style=social) 171 | - [drawio](https://github.com/jgraph/drawio) [[在线演示](https://app.diagrams.net/)] - 可配置的流程图应用程序 ![](https://img.shields.io/github/stars/jgraph/drawio?style=social) ![](https://img.shields.io/github/forks/jgraph/drawio?style=social) 172 | - [Drawflow](https://github.com/jerosoler/Drawflow) [[在线演示](https://jerosoler.github.io/Drawflow/)] - 仅用4行代码即可创建基于dom和svg的流程图 ![](https://img.shields.io/github/stars/jerosoler/Drawflow?style=social) ![](https://img.shields.io/github/forks/jerosoler/Drawflow?style=social) 173 | - [Flowy](https://github.com/alyssaxuu/flowy) [[在线演示](https://alyssax.com/x/flowy/)] - 用于创建流程图的最小javascript库 ![](https://img.shields.io/github/stars/alyssaxuu/flowy?style=social) ![](https://img.shields.io/github/forks/alyssaxuu/flowy?style=social) 174 | - [flowchart.js](https://github.com/adrai/flowchart.js) - 可以运行在浏览器和终端的流程图DSL和SVG流程图 ![](https://img.shields.io/github/stars/adrai/flowchart.js?style=social) ![](https://img.shields.io/github/forks/adrai/flowchart.js?style=social) 175 | - [mermaid](https://github.com/mermaid-js/mermaid) [[在线演示](https://mermaidjs.github.io/mermaid-live-editor/#/edit/eyJjb2RlIjoiZ3JhcGggVERcbiAgICBBW0hhcmRdIC0tPnxUZXh0fCBCKFJvdW5kKVxuICAgIEIgLS0-IEN7RGVjaXNpb259XG4gICAgQyAtLT58T25lfCBEW1Jlc3VsdCAxXVxuICAgIEMgLS0-fFR3b3wgRVtSZXN1bHQgMl0iLCJtZXJtYWlkIjp7InRoZW1lIjoiZGVmYXVsdCJ9fQ)] - 通过解析类Markdown语法生成图表和流程图等 ![](https://img.shields.io/github/stars/mermaid-js/mermaid?style=social) ![](https://img.shields.io/github/forks/mermaid-js/mermaid?style=social) 176 | - [wireflow](https://github.com/vanila-io/wireflow) [[在线演示](https://app.wireflow.co/)] - 用户流程图实时协作工具 ![](https://img.shields.io/github/stars/vanila-io/wireflow?style=social) ![](https://img.shields.io/github/forks/vanila-io/wireflow?style=social) 177 | - [butterfly](https://github.com/alibaba/butterfly) [[在线演示](https://butterfly-dag.gitee.io/butterfly-dag/demo/analysis)] - 基于JavaScript/React/Vue2的流程图组件 ![](https://img.shields.io/github/stars/alibaba/butterfly?style=social) ![](https://img.shields.io/github/forks/alibaba/butterfly?style=social) 178 | 179 | ### 甘特图 180 | - 以下甘特图不基于Canvas实现 181 | - [gantt](https://github.com/frappe/gantt) [[在线演示](https://frappe.io/gantt)] - 开源的Javascript甘特图。基于SVG ![](https://img.shields.io/github/stars/frappe/gantt?style=social) ![](https://img.shields.io/github/forks/frappe/gantt?style=social) 182 | - [jQueryGantt](https://github.com/robicch/jQueryGantt) [[在线演示](https://gantt.twproject.com/)] - Jquery甘特图编辑器 ![](https://img.shields.io/github/stars/robicch/jQueryGantt?style=social) ![](https://img.shields.io/github/forks/robicch/jQueryGantt?style=social) 183 | - [Gantt-Chart](https://github.com/dk8996/Gantt-Chart) [[在线演示](http://bl.ocks.org/dk8996/5534835)] - 基于D3的甘特图库 ![](https://img.shields.io/github/stars/dk8996/Gantt-Chart?style=social) ![](https://img.shields.io/github/forks/dk8996/Gantt-Chart?style=social) 184 | - [dhtmlxGantt](https://github.com/DHTMLX/gantt) [[在线演示](https://docs.dhtmlx.com/gantt/samples/01_initialization/08_explicit_time_range.html)] - GPL版的JS甘特图 ![](https://img.shields.io/github/stars/DHTMLX/gantt?style=social) ![](https://img.shields.io/github/forks/DHTMLX/gantt?style=social) 185 | - [gantt-for-react](https://github.com/hustcc/gantt-for-react) [[在线演示](https://git.hust.cc/gantt-for-react/)] - 一个简单的React甘特图组件 ![](https://img.shields.io/github/stars/hustcc/gantt-for-react?style=social) ![](https://img.shields.io/github/forks/hustcc/gantt-for-react?style=social) 186 | - [jquery.ganttView](https://github.com/thegrubbsian/jquery.ganttView) [[在线演示](http://thegrubbsian.github.io/jquery.ganttView/example/index.html)] - 一个可编辑的 jQuery 甘特图插件 ![](https://img.shields.io/github/stars/thegrubbsian/jquery.ganttView?style=social) ![](https://img.shields.io/github/forks/thegrubbsian/jquery.ganttView?style=social) 187 | - [wl-gantt](https://github.com/hql7/wl-gantt) - 简单易用且高度可配置的甘特图、进度计划项目管理插件 ![](https://img.shields.io/github/stars/hql7/wl-gantt?style=social) ![](https://img.shields.io/github/forks/hql7/wl-gantt?style=social) 188 | - [gantt-schedule-timeline-calendar](https://github.com/neuronetio/gantt-schedule-timeline-calendar) [[在线演示](https://gantt-schedule-timeline-calendar.neuronet.io/examples)] - ] - 甘特图、时间线、调度图、预订时间线，支持React、Ng、Vue、svelte ![](https://img.shields.io/github/stars/neuronetio/gantt-schedule-timeline-calendar?style=social) ![](https://img.shields.io/github/forks/neuronetio/gantt-schedule-timeline-calendar?style=social) 189 | 190 | ### 组织图 191 | - [OrgChart](https://github.com/dabeng/OrgChart/blob/master/README.zh-cn.md) [[在线演示](https://dabeng.github.io/OrgChart/)] - 简单直接的组织图插件 ![](https://img.shields.io/github/stars/dabeng/OrgChart?style=social) ![](https://img.shields.io/github/forks/dabeng/OrgChart?style=social) 192 | 193 | ### UML 194 | - [umlet](https://github.com/umlet/umlet) [[在线演示](http://www.umletino.com/umletino.html)] - 快速制作UML图的免费工具 ![](https://img.shields.io/github/stars/umlet/umlet?style=social) ![](https://img.shields.io/github/forks/umlet/umlet?style=social) 195 | 196 | ### 图编辑 197 | - [idraw](https://github.com/idrawjs/idraw) [[在线示例](https://idraw.js.org/)] - 一个简单的用于在 web 上绘图的 JavaScript 框架 ![](https://img.shields.io/github/stars/idrawjs/idraw?style=social) ![](https://img.shields.io/github/forks/idrawjs/idraw?style=social) 198 | - [Workflow Designer](https://github.com/guozhaolong/wfd) [[在线示例](https://guozhaolong.github.io/wfd/)] - 基于G6和React的可视化流程编辑器 ![](https://img.shields.io/github/stars/guozhaolong/wfd?style=social) ![](https://img.shields.io/github/forks/guozhaolong/wfd?style=social) 199 | - [vue-g6-editor](https://github.com/caoyu48/vue-g6-editor) [[在线示例](https://github.com/caoyu48/vue-g6-editor/blob/master/1.gif)] - 基于 G6 和 Vue 的可视化编辑器 ![](https://img.shields.io/github/stars/caoyu48/vue-g6-editor?style=social) ![](https://img.shields.io/github/forks/caoyu48/vue-g6-editor?style=social) 200 | - [X-Flowchart-Vue](https://github.com/OXOYO/X-Flowchart-Vue) [[在线演示](http://oxoyo.co/X-Flowchart-Vue/)] - 基于G6和Vue的可视化图形编辑器 ![](https://img.shields.io/github/stars/OXOYO/X-Flowchart-Vue?style=social) ![](https://img.shields.io/github/forks/OXOYO/X-Flowchart-Vue?style=social) 201 | - [web-pdm](https://erd.zyking.xyz/) [[在线示例](https://erd.zyking.xyz/demo)] - 基于G6的ER图工具，最终目标是在线版的PowerDesigner ![](https://img.shields.io/github/stars/lusess123/web-pdm?style=social) ![](https://img.shields.io/github/forks/lusess123/web-pdm?style=social) 202 | - [ng-antv](https://github.com/dappsnation/ng-antv) - 基于G6和Angular实现的编辑器。 ![](https://img.shields.io/github/stars/dappsnation/ng-antv?style=social) ![](https://img.shields.io/github/forks/dappsnation/ng-antv?style=social) 203 | - [welabx-g6](https://github.com/claudewowo/welabx-g6) [[在线示例](https://claudewowo.github.io/welabx-g6/dist/?_blank)] - 基于G6和Vue的流程图编辑器 ![](https://img.shields.io/github/stars/claudewowo/welabx-g6?style=social) ![](https://img.shields.io/github/forks/claudewowo/welabx-g6?style=social) 204 | - [topology](https://github.com/le5le-com/topology/blob/master/README.CN.md) [[在线示例](http://topology.le5le.com/workspace)] - 轻量（100k左右）且功能丰富的绘图工具（架构图、拓扑图、流程图、UML、脑图等） ![](https://img.shields.io/github/stars/le5le-com/topology?style=social) ![](https://img.shields.io/github/forks/le5le-com/topology?style=social) 205 | - [excalidraw](https://github.com/excalidraw/excalidraw) [[在线示例](https://excalidraw.com/)] - 用于用于素描手绘的虚拟白板 ![](https://img.shields.io/github/stars/excalidraw/excalidraw?style=social) ![](https://img.shields.io/github/forks/excalidraw/excalidraw?style=social) 206 | - [diagram-maker](https://github.com/awslabs/diagram-maker) [[在线示例](https://awslabs.github.io/diagram-maker/examples/LeftRightRectangular.html)] - 为任何图形类数据提供交互式编辑器的库 ![](https://img.shields.io/github/stars/awslabs/diagram-maker?style=social) ![](https://img.shields.io/github/forks/awslabs/diagram-maker?style=social) 207 | 208 | ### 电子表格 209 | - [x-spreadsheet](https://github.com/myliang/x-spreadsheet) [[在线演示](https://myliang.github.io/x-spreadsheet/)] - 基于webJavaScript(canvas)Excel表格 ![](https://img.shields.io/github/stars/myliang/x-spreadsheet?style=social) ![](https://img.shields.io/github/forks/myliang/x-spreadsheet?style=social) 210 | - [Luckysheet](https://github.com/mengshukeji/Luckysheet/blob/master/README-zh.md) [[在线演示](https://mengshukeji.github.io/LuckysheetDemo/)] - 在线电子表格，功能强大，配置简单，完全开源 ![](https://img.shields.io/github/stars/mengshukeji/Luckysheet?style=social) ![](https://img.shields.io/github/forks/mengshukeji/Luckysheet?style=social) 211 | - [sheetsee.js](https://github.com/jlord/sheetsee.js) - 可视化谷歌Spreadsheet的数据 ![](https://img.shields.io/github/stars/jlord/sheetsee.js?style=social) ![](https://img.shields.io/github/forks/jlord/sheetsee.js?style=social) 212 | - [SlickGrid](https://github.com/mleibman/SlickGrid) [[在线演示](http://6pac.github.io/SlickGrid/examples/example4-model.html)] - 极快的JavaScript网格/电子表格 ![](https://img.shields.io/github/stars/mleibman/SlickGrid?style=social) ![](https://img.shields.io/github/forks/mleibman/SlickGrid?style=social) 213 | - [handsontable](https://github.com/handsontable/handsontable) [[在线演示](https://handsontable.com/demo)] - 带电子表格的数据网格，可以在React、Ng、Vue中使用 ![](https://img.shields.io/github/stars/handsontable/handsontable?style=social) ![](https://img.shields.io/github/forks/handsontable/handsontable?style=social) 214 | - [cheetah-grid](https://github.com/future-architect/cheetah-grid) [[在线演示](https://future-architect.github.io/cheetah-grid/#/)] - 最快的网络开源数据表 ![](https://img.shields.io/github/stars/future-architect/cheetah-grid?style=social) ![](https://img.shields.io/github/forks/future-architect/cheetah-grid?style=social) 215 | - [Jspreadsheet CE](https://github.com/jspreadsheet/ce) [[在线演示](https://bossanova.uk/jspreadsheet/v4/examples)] - 创建与其他软件兼容的web端交互式表格和电子表格 ![](https://img.shields.io/github/stars/jspreadsheet/ce?style=social) ![](https://img.shields.io/github/forks/jspreadsheet/ce?style=social) 216 | - [canvas-datagrid](https://github.com/TonyGermaneri/canvas-datagrid) [[在线演示](https://canvas-datagrid.js.org/demo.html)] - 基于Canvas的数据网格web组件。能够在单个画布元素上显示数百万连续的分层行和列，而无需分页或加载 ![](https://img.shields.io/github/stars/TonyGermaneri/canvas-datagrid?style=social) ![](https://img.shields.io/github/forks/TonyGermaneri/canvas-datagrid?style=social) 217 | 218 | ### 图表库 219 | - [D3](https://github.com/d3/d3) [[在线演示](https://observablehq.com/@d3/gallery)] - D3(或D3.js)是一个用于web标准可视化数据的JS库 ![](https://img.shields.io/github/stars/d3/d3?style=social) ![](https://img.shields.io/github/forks/d3/d3?style=social) 220 | - [awesome-d3](https://github.com/wbkd/awesome-d3) - D3非资源集合 ![](https://img.shields.io/github/stars/wbkd/awesome-d3?style=social) ![](https://img.shields.io/github/forks/wbkd/awesome-d3?style=social) 221 | - [angular-charts](https://github.com/chinmaymk/angular-charts) - 基于D3创建Angular创建图表的指令库 ![](https://img.shields.io/github/stars/chinmaymk/angular-charts?style=social) ![](https://img.shields.io/github/forks/chinmaymk/angular-charts?style=social) 222 | - [nvd3](http://nvd3-community.github.io/nvd3/examples/documentation.html) [[在线演示](http://nvd3-community.github.io/nvd3/)] - 一个用d3.js编写的可重用图表库 ![](https://img.shields.io/github/stars/novus/nvd3?style=social) ![](https://img.shields.io/github/forks/novus/nvd3?style=social) 223 | - [c3](https://c3js.org/) [[在线演示](https://c3js.org/examples.html)] - 一个基于D3的可重用图表库 ![](https://img.shields.io/github/stars/c3js/c3?style=social) ![](https://img.shields.io/github/forks/c3js/c3?style=social) 224 | - [dc.js](https://github.com/dc-js/dc.js) [[在线演示](http://dc-js.github.io/dc.js/)] - 基于D3使用corssfilter渲染的多维图表 ![](https://img.shields.io/github/stars/dc-js/dc.js?style=social) ![](https://img.shields.io/github/forks/dc-js/dc.js?style=social) 225 | - [britecharts](https://britecharts.github.io/britecharts/) [[在线演示](https://britecharts.github.io/britecharts/tutorial-bar.html)] - 基于D3.js v5的客户端可重用图表库 ![](https://img.shields.io/github/stars/britecharts/britecharts?style=social) ![](https://img.shields.io/github/forks/britecharts/britecharts?style=social) 226 | - [neo4jd3](https://github.com/eisman/neo4jd3) [[在线演示](https://britecharts.github.io/britecharts/tutorial-bar.html)] - 使用D3.js的Neo4j图形可视化。![](https://img.shields.io/github/stars/eisman/neo4jd3?style=social) ![](https://img.shields.io/github/forks/eisman/neo4jd3?style=social) 227 | - [nivo](https://github.com/plouc/nivo) [[在线演示](https://nivo.rocks/components/)] - 基于React和D3提供了一套丰富的数据可视化组件 ![](https://img.shields.io/github/stars/plouc/nivo?style=social) ![](https://img.shields.io/github/forks/plouc/nivo?style=social) 228 | 229 | - [echarts](https://github.com/apache/echarts) [[在线演示](https://echarts.apache.org/examples/zh/index.html)] - 一个强大的交互式图表和数据可视化库 ![](https://img.shields.io/github/stars/apache/echarts?style=social) ![](https://img.shields.io/github/forks/apache/echarts?style=social) 230 | - [v-charts](https://v-charts.js.org/#/) [[在线演示](https://codesandbox.io/s/z69myovqzx)] - 基于 Vue2.0 和 ECharts 封装的图表组件 ![](https://img.shields.io/github/stars/ElemeFE/v-charts?style=social) ![](https://img.shields.io/github/forks/ElemeFE/v-charts?style=social) 231 | - [echarts-for-weixin](https://github.com/ecomfe/echarts-for-weixin) - Apache ECharts (incubating) 的微信小程序版本 ![](https://img.shields.io/github/stars/ecomfe/echarts-for-weixin?style=social) ![](https://img.shields.io/github/forks/ecomfe/echarts-for-weixin?style=social) 232 | 233 | - [Chart.js](https://github.com/chartjs/Chart.js) [[在线演示](https://www.chartjs.org/docs/latest/samples/bar/vertical.html)] - 给开发和设计人员的简单而灵活的js图表 ![](https://img.shields.io/github/stars/chartjs/Chart.js?style=social) ![](https://img.shields.io/github/forks/chartjs/Chart.js?style=social) 234 | - [vue-chartjs](https://vue-chartjs.org/zh-cn/) [[在线演示](http://demo.vue-chartjs.org/)] - 基于Chart.js的Vue图表组件 ![](https://img.shields.io/github/stars/apertureless/vue-chartjs?style=social) ![](https://img.shields.io/github/forks/apertureless/vue-chartjs?style=social) 235 | - [react-chartjs](https://github.com/reactjs/react-chartjs) [[在线演示]()] - 基于chart.js的React图表组件 ![](https://img.shields.io/github/stars/reactjs/react-chartjs?style=social) ![](https://img.shields.io/github/forks/reactjs/react-chartjs?style=social) 236 | - [angular-chart.js](http://jtblin.github.io/angular-chart.js/) [[在线演示](http://jtblin.github.io/angular-chart.js/#top)] - 基于Chart.js的AngularJS响应式、漂亮的图表库 ![](https://img.shields.io/github/stars/jtblin/angular-chart.js?style=social) ![](https://img.shields.io/github/forks/jtblin/angular-chart.js?style=social) 237 | 238 | - [AntV](https://antv.gitee.io/zh) - 蚂蚁集团全新一代数据可视化解决方案 239 | - [G](https://antv-g-next.gitee.io/zh/docs/guide/introduce/) [[在线演示](https://antv-g-next.gitee.io/zh/examples/shape)] - AntV底层的2D/3D渲染引擎，适配Canvas2D/SVG/WebGL/WebGPU ![](https://img.shields.io/github/stars/antvis/g?style=social) 240 | - [G2](https://github.com/antvis/g2) [[在线演示](https://g2.antv.vision/zh/examples/gallery)] - 一套面向常规统计图表，以数据驱动的高交互可视化图形语法。 ![](https://img.shields.io/github/stars/antvis/g2?style=social) ![](https://img.shields.io/github/forks/antvis/g2?style=social) 241 | - [G2Plot](https://github.com/antvis/g2plot) [[在线演示](https://antv-g2plot.gitee.io/zh/examples/gallery/)] - 基于图形语法（the Grammar of Graphics）的图表库 ![](https://img.shields.io/github/forks/antvis/g2plot?style=social) 242 | - [G6](https://antv-g6.gitee.io/zh/) [[在线演示](https://antv-g6.gitee.io/zh/examples/gallery)] - ♾ G6 是一个简单、易用、完备的图可视化引擎 ![](https://img.shields.io/github/stars/antvis/g6?style=social) ![](https://img.shields.io/github/forks/antvis/g6?style=social) 243 | - [F2](https://antv-f2.gitee.io/zh/docs/tutorial/getting-started) [[在线演示](https://antv-f2.gitee.io/zh/examples/gallery)] - 开箱即用的移动端可视化解决方案，完美支持H5，兼容node、小程序、weex ![](https://img.shields.io/github/stars/antvis/F2?style=social) 244 | - [F2Native](https://antv-f2native.gitee.io/zh) [[在线演示](https://antv-f2native.gitee.io/zh/docs/examples/line/line)] - 专注于移动客户端，开箱即用、高性能的可视化解决方案 ![](https://img.shields.io/github/stars/antvis/f2native?style=social) ![](https://img.shields.io/github/forks/antvis/f2native?style=social) 245 | - [F6](https://antv-f6.gitee.io/zh/) [[在线示例](https://antv-f6.gitee.io/zh/docs/examples/tree/compactBox)] - F6是一款可以快速、流畅运行于移动设备中的图可视化引擎 ![](https://img.shields.io/github/stars/antvis/f6?style=social) ![](https://img.shields.io/github/forks/antvis/f6?style=social) 246 | - [X6](https://antv-x6.gitee.io/zh/) [[在线演示](https://antv-x6.gitee.io/zh/examples/gallery)] - 🚀 X6 是 AntV 旗下的图编辑引擎。 ![](https://img.shields.io/github/stars/antvis/x6?style=social) ![](https://img.shields.io/github/forks/antvis/x6?style=social) 247 | - [XFlow](https://xflow.antv.vision/zh-CN/) [[在线示例](https://xflow.antv.vision/docs/tutorial/intro/getting-started/)] - 基于X6、面向React技术栈用户的专业图编辑应用级解决方案 ![](https://img.shields.io/github/stars/antvis/XFlow?style=social) ![](https://img.shields.io/github/forks/antvis/XFlow?style=social) 248 | - [S2](https://github.com/antvis/s2) [[在线演示](https://antv-s2.gitee.io/zh/examples/gallery/)] - 数据驱动的多维分析表格。 ![](https://img.shields.io/github/stars/antvis/s2?style=social) ![](https://img.shields.io/github/forks/antvis/s2?style=social) 249 | - [L7](https://antv-l7.gitee.io/zh) [[在线演示](https://l7.antv.vision/en/examples/gallery)] - 🌎 基于WebGL开源的大规模地理空间数据可视分析开发框架 ![](https://img.shields.io/github/stars/antvis/l7?style=social) ![](https://img.shields.io/github/forks/antvis/l7?style=social) 250 | - [L7Plot](https://antv-l7plot.gitee.io/zh/) [[在线示例](https://antv-l7plot.gitee.io/zh/examples/gallery)] - 简单易用、图表丰富、支持定制的地理空间图表库 ![](https://img.shields.io/github/stars/antvis/L7Plot?style=social) ![](https://img.shields.io/github/forks/antvis/L7Plot?style=social) 251 | - [Graphin](https://antv-graphin.gitee.io/) [[在线示例](https://antv-graphin.gitee.io/components/interaction/context-menu)] - 基于G6封装的React组件库，专注在关系可视分析领域 ![](https://img.shields.io/github/stars/antvis/graphin?style=social) ![](https://img.shields.io/github/forks/antvis/graphin?style=social) 252 | - [Ant Design Charts](https://charts.ant.design/zh) [[在线示例](https://charts.ant.design/zh/examples/gallery)] - 简单好用的 React 图表库。 ![](https://img.shields.io/github/stars/ant-design/ant-design-charts?style=social) ![](https://img.shields.io/github/forks/ant-design/ant-design-charts?style=social) 253 | - [AVA](https://antv-ava.gitee.io/zh) [[在线示例](https://antv-ava.gitee.io/zh/examples/gallery)] - AVA 是为了更简便的可视分析而生的技术框架 ![](https://img.shields.io/github/stars/antvis/ava?style=social) ![](https://img.shields.io/github/forks/antvis/ava?style=social) 254 | - [Viser](https://viserjs.github.io/) [[在线示例](https://viserjs.github.io/demoHome.html)] - 基于G2的数据可视化工具包，支持React、Vue和AngularJS ![](https://img.shields.io/github/stars/viserjs/viser?style=social) ![](https://img.shields.io/github/forks/viserjs/viser?style=social) 255 | - [highcharts](https://github.com/highcharts/highcharts) [[在线演示](https://www.highcharts.com/demo)] - 基于SVG的JavaScript图表库,支持旧浏览器 ![](https://img.shields.io/github/stars/highcharts/highcharts?style=social) ![](https://img.shields.io/github/forks/highcharts/highcharts?style=social) 256 | 257 | - [wx-charts](https://github.com/xiaolin3303/wx-charts) [[在线演示](https://github.com/xiaolin3303/wx-charts-demo)] - 微信小程序图表charts组件 ![](https://img.shields.io/github/stars/xiaolin3303/wx-charts?style=social) ![](https://img.shields.io/github/forks/xiaolin3303/wx-charts?style=social) 258 | 259 | - [wordcloud2.js](https://github.com/timdream/wordcloud2.js) [[在线演示](https://wordcloud2-js.timdream.org/#love)] - 2D Canvas/Html词云 ![](https://img.shields.io/github/stars/timdream/wordcloud2.js?style=social) ![](https://img.shields.io/github/forks/timdream/wordcloud2.js?style=social) 260 | 261 | - [chartist-js](https://github.com/gionkunz/chartist-js) [[在线演示](http://gionkunz.github.io/chartist-js/examples.html)] - 简单的响应式图表 ![](https://img.shields.io/github/stars/gionkunz/chartist-js?style=social) ![](https://img.shields.io/github/forks/gionkunz/chartist-js?style=social) 262 | 263 | - [charts](https://frappe.io/charts/docs) [[在线演示](https://frappe.io/charts)] - 零依赖的、简单的、响应快的、现代SVG图表 ![](https://img.shields.io/github/stars/frappe/charts?style=social) ![](https://img.shields.io/github/forks/frappe/charts?style=social) 264 | 265 | - [flot](http://www.flotcharts.org/) [[在线演示](http://www.flotcharts.org/flot/examples/)] - 基于Jquery为工程和科学应用程序派生的JS绘图库 ![](https://img.shields.io/github/stars/flot/flot?style=social) ![](https://img.shields.io/github/forks/flot/flot?style=social) 266 | 267 | - [apexcharts.js](https://apexcharts.com/) [[在线演示](https://apexcharts.com/javascript-chart-demos/)] - 基于SVG的交互式JavaScript图表 ![](https://img.shields.io/github/stars/apexcharts/apexcharts.js?style=social) ![](https://img.shields.io/github/forks/apexcharts/apexcharts.js?style=social) 268 | 269 | - [plotly.js](https://github.com/plotly/plotly.js) [[在线演示](https://plotly.com/javascript/)] - Ploty和Dash的JavaScript版本的开源图表库 ![](https://img.shields.io/github/stars/plotly/plotly.js?style=social) ![](https://img.shields.io/github/forks/plotly/plotly.js?style=social) 270 | 271 | - [easy-pie-chart](https://github.com/rendro/easy-pie-chart) - 一个轻量级插件，为单个值绘制简单带动画的饼图 ![](https://img.shields.io/github/stars/rendro/easy-pie-chart?style=social) ![](https://img.shields.io/github/forks/rendro/easy-pie-chart?style=social) 272 | 273 | - [react-vis](https://github.com/uber/react-vis) [[在线演示](http://uber.github.io/react-vis/examples/showcases/axes)] - React的数据可视化组件 ![](https://img.shields.io/github/stars/uber/react-vis?style=social) ![](https://img.shields.io/github/forks/uber/react-vis?style=social) 274 | - [vega](https://vega.github.io/vega) [[在线演示](https://vega.github.io/vega/examples/)] - 可视化语法，使用Vega，您可以用JSON格式描述数据可视化，并使用HTML5 Canvas或SVG生成交互式视图 ![](https://img.shields.io/github/stars/vega/vega?style=social) ![](https://img.shields.io/github/forks/vega/vega?style=social) 275 | - [heatmap.js](https://github.com/pa7/heatmap.js) - 基于HTML5 Canvas的Js热力图 ![](https://img.shields.io/github/stars/pa7/heatmap.js?style=social) ![](https://img.shields.io/github/forks/pa7/heatmap.js?style=social) 276 | - [zeu](https://github.com/shzlw/zeu) [[在线演示](https://shzlw.github.io/zeu/examples/my-command-center.html)] - 用于构建实时电视仪表板、监控UI和物联网Web界面的JS库 ![](https://img.shields.io/github/stars/shzlw/zeu?style=social) ![](https://img.shields.io/github/forks/shzlw/zeu?style=social) 277 | - [HQChart](https://github.com/jones2000/HQChart) - HQChart - H5, 微信小程序 沪深/港股/数字货币/期货/美股 K线图(kline),走势图,缩放,拖拽,十字光标,画图工具,截图,筹码图 ![](https://img.shields.io/github/stars/jones2000/HQChart?style=social) ![](https://img.shields.io/github/forks/jones2000/HQChart?style=social) 278 | - [canvas-gauges](https://github.com/Mikhus/canvas-gauges) [[在线演示](http://canvas-gauges.com/documentation/examples/)] - 使用纯 JavaScript 和 HTML5 画布的高度可配置仪表盘。没有依赖性。由于代码库最少，因此适用于物联网设备 ![](https://img.shields.io/github/stars/Mikhus/canvas-gauges?style=social) ![](https://img.shields.io/github/forks/Mikhus/canvas-gauges?style=social) 279 | - [lightweight-charts](https://github.com/tradingview/lightweight-charts) [[在线演示](https://www.tradingview.com/lightweight-charts/)] - 使用H5 Canvas创建的财务轻量级图表 ![](https://img.shields.io/github/stars/tradingview/lightweight-charts?style=social) ![](https://img.shields.io/github/forks/tradingview/lightweight-charts?style=social) 280 | 281 | ### 海报截图 282 | - [html2canvas](https://html2canvas.hertzen.com/) [[在线演示](https://html2canvas.hertzen.com/)] - JS截图插件 ![](https://img.shields.io/github/stars/niklasvh/html2canvas?style=social) ![](https://img.shields.io/github/forks/niklasvh/html2canvas?style=social) 283 | - [dom-to-image](https://github.com/tsayen/dom-to-image) - 使用HTML5 Canvas从DOM节点生成图像 ![](https://img.shields.io/github/stars/tsayen/dom-to-image?style=social) ![](https://img.shields.io/github/forks/tsayen/dom-to-image?style=social) 284 | - [html-to-image](https://github.com/bubkoo/html-to-image) - 使用HTML5 Canvas和SVG从DOM节点生成图像。 ![](https://img.shields.io/github/stars/bubkoo/html-to-image?style=social) ![](https://img.shields.io/github/forks/bubkoo/html-to-image?style=social) 285 | - [canvas2image](https://github.com/hongru/canvas2image) [[在线演示](https://github.com/hongru/canvas2image/blob/master/index.html)] - 用于保存或转换Canvas为图片的工具 ![](https://img.shields.io/github/stars/hongru/canvas2image?style=social) ![](https://img.shields.io/github/forks/hongru/canvas2image?style=social) 286 | - [mp_canvas_drawer](https://github.com/kuckboy1994/mp_canvas_drawer) [[在线演示](https://github.com/kuckboy1994/mp_canvas_drawer#%E6%BC%94%E7%A4%BA)] - 微信小程序绘图助手，通过json生成分享朋友圈的图片 ![](https://img.shields.io/github/stars/kuckboy1994/mp_canvas_drawer?style=social) ![](https://img.shields.io/github/forks/kuckboy1994/mp_canvas_drawer?style=social) 287 | - [vue-canvas-poster](https://github.com/sunniejs/vue-canvas-poster) [[在线演示](https://www.sunniejs.cn/vant-demo/#/example/poster)] - 通过CSS属性生成海报图的轻量级Vue组件 ![](https://img.shields.io/github/stars/sunniejs/vue-canvas-poster?style=social) ![](https://img.shields.io/github/forks/sunniejs/vue-canvas-poster?style=social) 288 | - [wxa-plugin-canvas](https://github.com/jasondu/wxa-plugin-canvas) - 小程序海报组件-生成朋友圈分享海报并生成图片 ![](https://img.shields.io/github/stars/jasondu/wxa-plugin-canvas?style=social) ![](https://img.shields.io/github/forks/jasondu/wxa-plugin-canvas?style=social) 289 | 290 | ### 数据处理 291 | - [html2pdf.js](https://github.com/eKoopmans/html2pdf.js) - 纯JS的客户端HTML生成PDF ![](https://img.shields.io/github/stars/eKoopmans/html2pdf.js?style=social) ![](https://img.shields.io/github/forks/eKoopmans/html2pdf.js?style=social) 292 | - [rasterizeHTML.js](https://github.com/cburgmer/rasterizeHTML.js) - 将HTML渲染到浏览器的Canvas中 ![](https://img.shields.io/github/stars/cburgmer/rasterizeHTML.js?style=social) ![](https://img.shields.io/github/forks/cburgmer/rasterizeHTML.js?style=social) 293 | - [JavaScript-Canvas-to-Blob](https://github.com/blueimp/JavaScript-Canvas-to-Blob) - 一个将Canvas元素转换为Blob对象的函数 ![](https://img.shields.io/github/stars/blueimp/JavaScript-Canvas-to-Blob?style=social) ![](https://img.shields.io/github/forks/blueimp/JavaScript-Canvas-to-Blob?style=social) 294 | - [jsgif](https://github.com/antimatter15/jsgif) - 将HTML5 Canvas保存到GIF和动画。一个AS3GIF Gifplayer到JS的港口 ![](https://img.shields.io/github/stars/antimatter15/jsgif?style=social) ![](https://img.shields.io/github/forks/antimatter15/jsgif?style=social) 295 | - [whammy](https://github.com/antimatter15/whammy) - 基于Canvas来Hack的实时JS webm编码器 ![](https://img.shields.io/github/stars/antimatter15/whammy?style=social) ![](https://img.shields.io/github/forks/antimatter15/whammy?style=social) 296 | - [js-imagediff](https://github.com/HumbleSoftware/js-imagediff) - 带有Jasmine匹配器的Canvas图像差异比对程序，用于测试Canvas ![](https://img.shields.io/github/stars/HumbleSoftware/js-imagediff?style=social) ![](https://img.shields.io/github/forks/HumbleSoftware/js-imagediff?style=social) 297 | - [canvas2svg](https://github.com/gliffy/canvas2svg) [[在线演示](http://gliffy.github.io/canvas2svg/)] - 将H5 Canvas绘图命令是转换成SVG ![](https://img.shields.io/github/stars/gliffy/canvas2svg?style=social) ![](https://img.shields.io/github/forks/gliffy/canvas2svg?style=social) 298 | - [canvg](https://github.com/canvg/canvg) [[在线演示](https://canvg.github.io/canvg/demo/index.html)] - Canvas上的JS SVG解析器和渲染器 ![](https://img.shields.io/github/stars/canvg/canvg?style=social) ![](https://img.shields.io/github/forks/canvg/canvg?style=social) 299 | 300 | ### 图像处理 301 | - [tui.image-editor](https://github.com/nhn/tui.image-editor) [[在线演示](http://nhn.github.io/tui.image-editor/latest/tutorial-example01-includeUi)] - 基于Canvas功能完整的照片图像编辑器。 ![](https://img.shields.io/github/stars/nhn/tui.image-editor?style=social) ![](https://img.shields.io/github/forks/nhn/tui.image-editor?style=social) 302 | - [merge-images](https://github.com/lukechilds/merge-images) - 轻松将图像组合在一起，且不会弄脏周围的画布 ![](https://img.shields.io/github/stars/lukechilds/merge-images?style=social) ![](https://img.shields.io/github/forks/lukechilds/merge-images?style=social) 303 | - [we-cropper](https://we-plugin.github.io/we-cropper/#/) [[在线演示](https://unpkg.com/we-cropper@1.2.0/docs/assets/online.jpg)] - 微信小程序图片裁剪工具 ![](https://img.shields.io/github/stars/we-plugin/we-cropper?style=social) ![](https://img.shields.io/github/forks/we-plugin/we-cropper?style=social) 304 | - [miniPaint](https://github.com/viliusle/miniPaint) [[在线演示](https://viliusle.github.io/miniPaint/)] - 在线图片编辑器 ![](https://img.shields.io/github/stars/viliusle/miniPaint?style=social) ![](https://img.shields.io/github/forks/viliusle/miniPaint?style=social) 305 | - [animockup](https://github.com/alyssaxuu/animockup) [[在线演示](https://animockup.com/)] - 在浏览器中创建动画模型，并导出为视频或动画GIF ![](https://img.shields.io/github/stars/alyssaxuu/animockup?style=social) ![](https://img.shields.io/github/forks/alyssaxuu/animockup?style=social) 306 | - [vintageJS](https://github.com/rendro/vintageJS) - 使用HTML5 Canvas元素为图像添加复古/复古效果 ![](https://img.shields.io/github/stars/rendro/vintageJS?style=social) ![](https://img.shields.io/github/forks/rendro/vintageJS?style=social) 307 | - [glitch-canvas](https://github.com/snorpey/glitch-canvas) [[在线演示](https://snorpey.github.io/jpg-glitch/)] - 给画布元素添加故障效果 ![](https://img.shields.io/github/stars/snorpey/glitch-canvas?style=social) ![](https://img.shields.io/github/forks/snorpey/glitch-canvas?style=social) 308 | - [JIC](https://github.com/brunobar79/J-I-C) [[在线演示](http://makeitsolutions.com/labs/jic/)] - 使用Canvas和文件API的JS图像压缩器 ![](https://img.shields.io/github/stars/brunobar79/J-I-C?style=social) ![](https://img.shields.io/github/forks/brunobar79/J-I-C?style=social) 309 | - [context-blender](https://github.com/Phrogz/context-blender) - 与Photoshop混合模式功能相同的Canvas上下文 ![](https://img.shields.io/github/stars/Phrogz/context-blender?style=social) ![](https://img.shields.io/github/forks/Phrogz/context-blender?style=social) 310 | - [ios-imagefile-megapixel](https://github.com/stomita/ios-imagefile-megapixel) - 修复iOS6 Safari的大尺寸图像（超过百万像素）的渲染问题 ![](https://img.shields.io/github/stars/stomita/ios-imagefile-megapixel?style=social) ![](https://img.shields.io/github/forks/stomita/ios-imagefile-megapixel?style=social) 311 | - [fast-average-color](https://github.com/fast-average-color/fast-average-color) [[在线演示](https://fast-average-color.github.io/examples/background.html)] - 计算浏览器中图像或视频的主色/平均色的js库 ![](https://img.shields.io/github/stars/fast-average-color/fast-average-color?style=social) ![](https://img.shields.io/github/forks/fast-average-color/fast-average-color?style=social) 312 | - [mcanvas](https://github.com/xd-tayde/mcanvas) [[在线演示](http://guoxiaodong.net/)] - 用于合成图片的canvas绘制库 ![](https://img.shields.io/github/stars/xd-tayde/mcanvas?style=social) ![](https://img.shields.io/github/forks/xd-tayde/mcanvas?style=social) 313 | 314 | ### 滤镜 315 | - [canvasfilters](https://github.com/kig/canvasfilters) [[在线演示](http://fhtr.org/canvasfilters/)] - Canvas图像滤镜 ![](https://img.shields.io/github/stars/kig/canvasfilters?style=social) ![](https://img.shields.io/github/forks/kig/canvasfilters?style=social) 316 | 317 | ### 画板 318 | - [jspaint](https://github.com/1j01/jspaint) [[在线演示](https://jspaint.app/#local:5ee9c6aab5992)] - Web版的经典MS Paint翻版 ![](https://img.shields.io/github/stars/1j01/jspaint?style=social) ![](https://img.shields.io/github/forks/1j01/jspaint?style=social) 319 | - [drawingboard.js](https://github.com/Leimi/drawingboard.js) [[在线演示](http://leimi.github.io/drawingboard.js/)] - 一个基于画布的绘图应用程序，您可以轻松集成到您的网站上。 ![](https://img.shields.io/github/stars/Leimi/drawingboard.js?style=social) ![](https://img.shields.io/github/forks/Leimi/drawingboard.js?style=social) 320 | - [drawingboard](https://github.com/vipstone/drawingboard) [[在线演示](https://vipstone.github.io/drawingboard/drawingboard/index.html)] - 高级画板—自由绘、直/虚线、箭头、所有几何图形 ![](https://img.shields.io/github/stars/vipstone/drawingboard?style=social) ![](https://img.shields.io/github/forks/vipstone/drawingboard?style=social) 321 | - [draw](https://github.com/amoshydra/draw) [[在线演示](https://amoshydra.github.io/draw/)] - 支持钢笔和触摸的Web端Canvas ![](https://img.shields.io/github/stars/amoshydra/draw?style=social) ![](https://img.shields.io/github/forks/amoshydra/draw?style=social) 322 | - [tldraw](https://github.com/tldraw/tldraw) [[在线演示](https://www.tldraw.com/)] - 一个非常好的画板 ![](https://img.shields.io/github/stars/tldraw/tldraw?style=social) ![](https://img.shields.io/github/forks/tldraw/tldraw?style=social) 323 | 324 | ### 签名 325 | - [signature_pad](https://github.com/szimek/signature_pad) [[在线演示](http://szimek.github.io/signature_pad/)] - 基于HTML5画布的平滑签名绘图 ![](https://img.shields.io/github/stars/szimek/signature_pad?style=social) ![](https://img.shields.io/github/forks/szimek/signature_pad?style=social) 326 | - [vue-signature-pad](https://github.com/neighborhood999/vue-signature-pad) [[在线演示](https://codesandbox.io/s/n5qjp3oqv4)] - Vue版本的签名板 ![](https://img.shields.io/github/stars/neighborhood999/vue-signature-pad?style=social) ![](https://img.shields.io/github/forks/neighborhood999/vue-signature-pad?style=social) 327 | - [react-signature-pad](https://github.com/blackjk3/react-signature-pad) - React版的签名板 ![](https://img.shields.io/github/stars/blackjk3/react-signature-pad?style=social) ![](https://img.shields.io/github/forks/blackjk3/react-signature-pad?style=social) 328 | - [angular-signature](https://github.com/legalthings/angular-signature) - Angular版的签名板 ![](https://img.shields.io/github/stars/legalthings/angular-signature?style=social) ![](https://img.shields.io/github/forks/legalthings/angular-signature?style=social) 329 | - [react-native-signature-pad](https://github.com/kevinstumpf/react-native-signature-pad) - React-Native版的签名板 ![](https://img.shields.io/github/stars/kevinstumpf/react-native-signature-pad?style=social) ![](https://img.shields.io/github/forks/kevinstumpf/react-native-signature-pad?style=social) 330 | - [signature-pad](https://github.com/thread-pond/signature-pad) [[在线演示](https://thread-pond.github.io/signature-pad/examples/require-drawn-signature.html)] - JQ插件，创建基于Canvas的签名板 ![](https://img.shields.io/github/stars/thread-pond/signature-pad?style=social) ![](https://img.shields.io/github/forks/thread-pond/signature-pad?style=social) 331 | - [canvas-draw](https://github.com/Louiszhai/canvas-draw) [[在线演示](http://louiszhai.github.io/res/canvasDraw/#/sign)] - 使用Canvas手写签名或绘图，支持PC、Mobile和横屏 ![](https://img.shields.io/github/stars/Louiszhai/canvas-draw?style=social) ![](https://img.shields.io/github/forks/Louiszhai/canvas-draw?style=social) 332 | - [smooth-signature](https://github.com/linjc/smooth-signature) [[在线演示](https://l2j2c3.gitee.io/smooth-signature/demo/index.html)] - H5带笔锋手写签名，支持PC端和移动端，任何前端框架均可使用 ![](https://img.shields.io/github/stars/linjc/smooth-signature?style=social) ![](https://img.shields.io/github/forks/linjc/smooth-signature?style=social) 333 | 334 | ### 波纹动画 335 | - [wavesurfer.js](https://wavesurfer-js.org/) [[在线演示](https://wavesurfer-js.org/examples/)] - 以Web音频和Canvas的音频波纹 ![](https://img.shields.io/github/stars/katspaugh/wavesurfer.js?style=social) ![](https://img.shields.io/github/forks/katspaugh/wavesurfer.js?style=social) 336 | - [waveforms](https://github.com/joshwcomeau/waveforms) - 一个互动的、可探索的声波纹描绘特效 ![](https://img.shields.io/github/stars/joshwcomeau/waveforms?style=social) [[在线演示](https://pudding.cool/2018/02/waveforms/)] ![](https://img.shields.io/github/forks/joshwcomeau/waveforms?style=social) 337 | - [siriwave](https://github.com/kopiro/siriwave) [[在线演示](http://kopiro.github.io/siriwave/)] - JS实现的Apple® Siri 波纹特效 ![](https://img.shields.io/github/stars/kopiro/siriwave?style=social) ![](https://img.shields.io/github/forks/kopiro/siriwave?style=social) 338 | - [waves](https://github.com/dli/waves) [[在线演示](http://david.li/waves/)] - 模拟海浪效果 ![](https://img.shields.io/github/stars/dli/waves?style=social) ![](https://img.shields.io/github/forks/dli/waves?style=social) 339 | - [waveform-playlist](https://github.com/naomiaro/waveform-playlist) [[在线演示](http://naomiaro.github.io/waveform-playlist/)] - 具有画布波形预览的多轨网络音频编辑器和播放器。 ![](https://img.shields.io/github/stars/naomiaro/waveform-playlist?style=social) ![](https://img.shields.io/github/forks/naomiaro/waveform-playlist?style=social) 340 | - [wavedrom](https://github.com/wavedrom/wavedrom) [[在线演示](https://wavedrom.com/editor.html)] - 一个免费的开源在线数字时序图（波形）渲染引擎 ![](https://img.shields.io/github/stars/wavedrom/wavedrom?style=social) ![](https://img.shields.io/github/forks/wavedrom/wavedrom?style=social) 341 | 342 | ### 粒子动画 343 | - [Proton](https://projects.jpeer.at/proton/) [[在线演示](http://drawcall.github.io/Proton/#examples)] - Javascript粒子动画库 ![](https://img.shields.io/github/stars/drawcall/Proton?style=social) ![](https://img.shields.io/github/forks/drawcall/Proton?style=social) 344 | - [three.proton](https://github.com/drawcall/three.proton/) [[在线演示]()] - 神奇的3D粒子引擎，使用了three.js库和Proton ![](https://img.shields.io/github/stars/drawcall/three.proton?style=social) ![](https://img.shields.io/github/forks/drawcall/three.proton?style=social) 345 | - [bubbly-bg](https://github.com/tipsy/bubbly-bg) [[在线演示](https://tipsy.github.io/bubbly-bg/)] - 小于 1kB 的漂亮气泡背景(750 字节 gzipped) ![](https://img.shields.io/github/stars/tipsy/bubbly-bg?style=social) ![](https://img.shields.io/github/forks/tipsy/bubbly-bg?style=social) 346 | - [react-particle-effect-button](https://github.com/transitive-bullshit/react-particle-effect-button) [[在线演示](https://transitive-bullshit.github.io/react-particle-effect-button/)] - 基于React的爆裂粒子效果按钮 ![](https://img.shields.io/github/stars/transitive-bullshit/react-particle-effect-button?style=social) ![](https://img.shields.io/github/forks/transitive-bullshit/react-particle-effect-button?style=social) 347 | 348 | ### 路径动画 349 | - [pasition](https://github.com/dntzhang/pasition) [[在线演示](https://dntzhang.github.io/pasition/)] - 轻量级 Path 过渡库，可以渲染到任何地方 ![](https://img.shields.io/github/stars/dntzhang/pasition?style=social) ![](https://img.shields.io/github/forks/dntzhang/pasition?style=social) 350 | 351 | ### 音视频 352 | - [canvid](https://github.com/gka/canvid) [[在线演示](https://gka.github.io/canvid/)] - 在Canvas上播放短视频的零依赖JS库 ![](https://img.shields.io/github/stars/gka/canvid?style=social) ![](https://img.shields.io/github/forks/gka/canvid?style=social) 353 | 354 | ### 光标 355 | - [blobity](https://github.com/gmrchk/blobity) [[在线演示](https://blobity.dev/)] - 一个效果不错的canvas光标插件 ![](https://img.shields.io/github/stars/gmrchk/blobity?style=social) ![](https://img.shields.io/github/forks/gmrchk/blobity?style=social) 356 | 357 | ### 创意 358 | - [pts](https://github.com/williamngan/pts) [[在线演示](https://ptsjs.org/)] - 一个可视化和创意库 ![](https://img.shields.io/github/stars/williamngan/pts?style=social) ![](https://img.shields.io/github/forks/williamngan/pts?style=social) 359 | 360 | ### 二维码 361 | - [qrious](https://github.com/neocotic/qrious) [[在线演示](https://github.com/neocotic/qrious#examples)] - 使用Canvas生成二维码的纯JavaScript库 ![](https://img.shields.io/github/stars/neocotic/qrious?style=social) ![](https://img.shields.io/github/forks/neocotic/qrious?style=social) 362 | - [qrcodejs](https://github.com/davidshimjs/qrcodejs) - 基于JavaScript的跨浏览器二维码生成器 ![](https://img.shields.io/github/stars/davidshimjs/qrcodejs?style=social) ![](https://img.shields.io/github/forks/davidshimjs/qrcodejs?style=social) 363 | - [node-qrcode](https://github.com/soldair/node-qrcode) - 二维码生成器 ![](https://img.shields.io/github/stars/soldair/node-qrcode?style=social) ![](https://img.shields.io/github/forks/soldair/node-qrcode?style=social) 364 | - [wifi-card](https://github.com/bndw/wifi-card) [[在线演示](https://wificard.io/)] - 打印您连接的 WiFi 二维码(wificard.io) ![](https://img.shields.io/github/stars/bndw/wifi-card?style=social) ![](https://img.shields.io/github/forks/bndw/wifi-card?style=social) 365 | - [jsqrcode](https://github.com/LazarSoft/jsqrcode) [[在线演示](https://webqr.com/)] - Javascript 二维码生成器 ![](https://img.shields.io/github/stars/LazarSoft/jsqrcode?style=social) ![](https://img.shields.io/github/forks/LazarSoft/jsqrcode?style=social) 366 | - [instascan](https://github.com/schmich/instascan) [[在线演示](https://schmich.github.io/instascan/)] - 使用网络摄像头的 HTML5 二维码扫描仪 ![](https://img.shields.io/github/stars/schmich/instascan?style=social) ![](https://img.shields.io/github/forks/schmich/instascan?style=social) 367 | - [qrcode.react](https://github.com/zpao/qrcode.react) - 用于React的二维码组件 ![](https://img.shields.io/github/stars/zpao/qrcode.react?style=social) ![](https://img.shields.io/github/forks/zpao/qrcode.react?style=social) 368 | - [qrbtf](https://github.com/ciaochaos/qrbtf) [[在线演示](https://qrbtf.com/)] - 艺术二维码生成器 ![](https://img.shields.io/github/stars/ciaochaos/qrbtf?style=social) ![](https://img.shields.io/github/forks/ciaochaos/qrbtf?style=social) 369 | - [Awesome-qr.js](https://github.com/SumiMakito/Awesome-qr.js) [[在线演示]()] - 一个用 JavaScript 编写的很棒的二维码生成器 ![](https://img.shields.io/github/stars/SumiMakito/Awesome-qr.js?style=social) ![](https://img.shields.io/github/forks/SumiMakito/Awesome-qr.js?style=social) 370 | - [jquery-qrcode](https://github.com/jeromeetienne/jquery-qrcode) - JQ二维码独立生成（不依赖于外部服务） ![](https://img.shields.io/github/stars/jeromeetienne/jquery-qrcode?style=social) ![](https://img.shields.io/github/forks/jeromeetienne/jquery-qrcode?style=social) 371 | - [vue-qrcode-reader](https://github.com/gruhn/vue-qrcode-reader) [[在线演示](https://gruhn.github.io/vue-qrcode-reader/demos/DecodeAll.html)] - 一组用于检测和解码二维码的 Vue.js 组件 ![](https://img.shields.io/github/stars/gruhn/vue-qrcode-reader?style=social) ![](https://img.shields.io/github/forks/gruhn/vue-qrcode-reader?style=social) 372 | - [weapp-qrcode](https://github.com/yingye/weapp-qrcode) [[在线演示](https://github.com/yingye/weapp-qrcode#demo)] - 在 微信小程序 中，快速生成二维码 ![](https://img.shields.io/github/stars/yingye/weapp-qrcode?style=social) ![](https://img.shields.io/github/forks/yingye/weapp-qrcode?style=social) 373 | - [qr-image](https://github.com/alexeyten/qr-image) - 另一个二维码生成器 ![](https://img.shields.io/github/stars/alexeyten/qr-image?style=social) ![](https://img.shields.io/github/forks/alexeyten/qr-image?style=social) 374 | 375 | ### 验证码 376 | - [jigsaw](https://github.com/yeild/jigsaw) [[在线演示](https://yeild.github.io/jigsaw/demo.html)] - canvas滑动验证码 ![](https://img.shields.io/github/stars/yeild/jigsaw?style=social) ![](https://img.shields.io/github/forks/yeild/jigsaw?style=social) 377 | - [jq_slideImage](https://www.jq22.com/jquery-info21017) [[在线演示](https://www.jq22.com/yanshi21017)] - jQuery滑动拼图验证插件 378 | - [jigsaw](https://www.jq22.com/jquery-info19009) [[在线演示](https://www.jq22.com/yanshi19009)] - canvas滑动验证插件jigsaw 379 | - [JQuery插件库验证码资源地址](https://www.jq22.com/search?seo=%E9%AA%8C%E8%AF%81%E7%A0%81) 380 | 381 | ### 运行时 382 | - [node-canvas](https://github.com/Automattic/node-canvas) - 由Cairo支持的Node.js画布实现。 ![](https://img.shields.io/github/stars/Automattic/node-canvas?style=social) ![](https://img.shields.io/github/forks/Automattic/node-canvas?style=social) 383 | - [skia-canvas](https://github.com/samizdatco/skia-canvas) - 关于Canvas的Node.js环境 ![](https://img.shields.io/github/stars/samizdatco/skia-canvas?style=social) ![](https://img.shields.io/github/forks/samizdatco/skia-canvas?style=social) 384 | - [ExplorerCanvas](https://github.com/arv/ExplorerCanvas) - IE8以前的Canvas环境 ![](https://img.shields.io/github/stars/arv/ExplorerCanvas?style=social) ![](https://img.shields.io/github/forks/arv/ExplorerCanvas?style=social) 385 | 386 | ### 其他 387 | - [paper.js](http://paperjs.org/) [[在线演示](http://paperjs.org/examples/)] - 矢量图形脚本的瑞士军刀 ![](https://img.shields.io/github/stars/paperjs/paper.js?style=social) ![](https://img.shields.io/github/forks/paperjs/paper.js?style=social) 388 | - [react-canvas](https://github.com/Flipboard/react-canvas) - 将React组件渲染成Canvas而不是DOM ![](https://img.shields.io/github/stars/Flipboard/react-canvas?style=social) ![](https://img.shields.io/github/forks/Flipboard/react-canvas?style=social) 389 | - [react-native-canvas](https://github.com/iddan/react-native-canvas) - React Native Canvas组件 ![](https://img.shields.io/github/stars/iddan/react-native-canvas?style=social) ![](https://img.shields.io/github/forks/iddan/react-native-canvas?style=social) 390 | - [origamijs](https://raphamorim.io/origamijs/docs/) - 强大且轻量级的创建HTML5 Canvas的库 ![](https://img.shields.io/github/stars/raphamorim/origami.js?style=social) ![](https://img.shields.io/github/forks/raphamorim/origami.js?style=social) 391 | 392 | ## 插件资源网站 393 | - [CodePen Canvas特效资源](https://codepen.io/search/pens?q=canvas) 394 | - [ANIMPEN 码笔网 Canvas特效资源](https://animpen.com/search/pens?q=canvas) 395 | - [JQuery之家 Canvas特效资源](http://www.htmleaf.com/html5/html5-canvas/) 396 | - [JQuery插件库 Canvas特效资源](https://www.jq22.com/search?seo=canvas) 397 | - [CodePen上Canvas相关的你应该关注的人](https://github.com/nucliweb/People-You-Should-Follow-on-CodePen) 398 | 399 | ## 效果/案例 400 | - [canvas-confetti](https://github.com/catdad/canvas-confetti) [[在线演示](https://www.kirilv.com/canvas-confetti/)] - 一个撒花/纸屑效果插件 ![](https://img.shields.io/github/stars/catdad/canvas-confetti?style=social) ![](https://img.shields.io/github/forks/catdad/canvas-confetti?style=social) 401 | - [lucky-canvas](https://100px.net/) [[在线演示](https://100px.net/demo/wheel.html)] - 基于 TS + Canvas 开发的【大转盘 / 九宫格】抽奖插件，rainbow 一套源码适配多端框架 JS / Vue / React / Taro / UniApp / 微信小程序等 ![](https://img.shields.io/github/stars/buuing/lucky-canvas?style=social) ![](https://img.shields.io/github/forks/buuing/lucky-canvas?style=social) 402 | - [CanvasInput](https://github.com/goldfire/CanvasInput) [[在线演示](https://goldfirestudios.com/canvasinput-html5-canvas-text-input)] - HTML5 Canvas文本输入框 ![](https://img.shields.io/github/stars/goldfire/CanvasInput?style=social) ![](https://img.shields.io/github/forks/goldfire/CanvasInput?style=social) 403 | - [wind-js](https://github.com/Esri/wind-js) [[在线演示](http://esri.github.io/wind-js/)] - 使用JS API在Canvas中模拟风的演示动画 ![](https://img.shields.io/github/stars/Esri/wind-js?style=social) ![](https://img.shields.io/github/forks/Esri/wind-js?style=social) 404 | - [curvejs](https://github.com/AlloyTeam/curvejs) [[在线演示](https://github.com/AlloyTeam/curvejs#demos)] - 魔幻线条 ![](https://img.shields.io/github/stars/AlloyTeam/curvejs?style=social) ![](https://img.shields.io/github/forks/AlloyTeam/curvejs?style=social) 405 | - [canvas-nest.js](https://github.com/hustcc/canvas-nest.js/blob/master/README-zh.md) - 一个基于 html5 canvas 绘制的网页背景效果。 ![](https://img.shields.io/github/stars/hustcc/canvas-nest.js?style=social) ![](https://img.shields.io/github/forks/hustcc/canvas-nest.js?style=social) 406 | - [canvas-special](https://github.com/bxm0927/) - 超多经典 Canvas 实例，动态离子背景、炫彩小球、贪吃蛇、坦克大战、是男人就下100层、心形文字等 ![](https://img.shields.io/github/stars/bxm0927/canvas-special?style=social) ![](https://img.shields.io/github/forks/bxm0927/canvas-special?style=social) 407 | - [canvas效果集合](https://github.com/sunshine940326/canvas) ![](https://img.shields.io/github/stars/sunshine940326/canvas?style=social) ![](https://img.shields.io/github/forks/sunshine940326/canvas?style=social) 408 | - [shape-shifter](https://github.com/kennethcachia/shape-shifter) [[在线演示](http://www.kennethcachia.com/shape-shifter/)] - 这是一个基于用户输入使用一组粒子来渲染不同形状的画布实验。它支持多种模式:文本，倒计时，时间和图标 ![](https://img.shields.io/github/stars/kennethcachia/shape-shifter?style=social) ![](https://img.shields.io/github/forks/kennethcachia/shape-shifter?style=social) 409 | - [canvas-test](https://github.com/whxaxes/canvas-test) - 小的canvas效果demo 410 | 411 | ## 文章 412 | - [可视化私房菜](https://www.yuque.com/antv/blog/2021s2) - 可视化国家队的私房菜，用心烹调，以飨读者。 413 | - [体系化建设 BI 业务定制图表](https://www.yuque.com/antv/vis-library) 414 | - [图可视化知多少](https://www.yuque.com/antv/g6-blog) - 图可视化、图分析及图编辑知识库。 415 | - [G2Plot 可视化圈子](https://www.yuque.com/antv/g2plot) 416 | - [G2：图形、交互语法](https://www.yuque.com/antv/g2-docs) 417 | - [可视化小讲堂](https://www.yuque.com/antv/gvvtcf) 418 | - [如何看待 Google Docs 将从 HTML 迁移到基于 Canvas 渲染？](https://www.zhihu.com/question/459251463) - @知乎 海蓝 419 | - [用Canvas画一只会跟着鼠标走的小狗](https://zhuanlan.zhihu.com/p/34139676) - @知乎 李银城 420 | - [用Canvas + WASM画一个迷宫](https://zhuanlan.zhihu.com/p/28203300) - @知乎 李银城 421 | - [玩转「Canvas」](https://www.bianchengquan.com/article/140323.html) - 编程圈 @糖少 422 | - [JS之使用Canvas绘图](https://www.jianshu.com/p/802c3bd2df34) - 简书 @LemonnYan 423 | - [一个少女心满满的例子带你入门 Canvas](https://juejin.cn/post/6844903490020442125) - 掘金 @sunshine小小倩 424 | - [为了让她10分钟入门canvas，我熬夜写了3个小项目和这篇文章](https://juejin.cn/post/6986785259966857247) - 掘金 @Sunshine_Lin 425 | - [更优雅地基于 canvas 在前端画海报](https://juejin.cn/post/6844903870276206606) - 掘金 @2dunn 426 | - [【🎨万物皆可动】详解Canvas路径动画](https://juejin.cn/post/6924866572972457992)- 掘金 @ChanningHyl 427 | - [产品经理：你能不能用div给我画条龙？](https://juejin.cn/post/6963476650356916254) - 掘金 @大帅老猿 428 | - [Canvas性能优化](https://juejin.cn/post/6844903682761310216) - 掘金 @清夜 429 | - [为了让你们进阶Canvas，我花7小时写了3个有趣的小游戏！！！](https://juejin.cn/post/6989003710030413838) - 掘金 @Sunshine_Lin 430 | - [十分钟实现灭霸打响指灰飞烟灭的效果](https://juejin.cn/post/6844903840249020429) - 掘金 @wangzy2019 431 | - [匠心打造canvas签名组件](http://louiszhai.github.io/2017/07/07/canvas-draw/) - @路易斯 432 | 433 | ## 贡献者 434 | 435 | 感谢以下人员对项目的贡献^V^： 436 | 437 | - [zyf214329704](https://github.com/zyf214329704) 438 | 439 | ## 协议 440 | 441 | [MIT](./LICENSE) 442 | -------------------------------------------------------------------------------- /assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/chinaBerg/awesome-canvas/b5e13167054e40b148c3e456654063fe0395b394/assets/logo.png --------------------------------------------------------------------------------