Web绘图

图可视化美学

计算机图形与可视化

HTML5 Canvas MDN教程

Internet Explorer 9 开发人员指南：HTML5 Canvas

HTML5草案标准中的Canvas元素文档

HTML5 Canvas 基础教程

This article takes you through the basics of implementing a 2D canvas context, and using the basic canvas functions, including lines, shape primitives, images, text, and more. You are assumed to have mastered JavaScript basics already.

HTML5 Canvas 菜鸟教程

HTML5 Canvas W3school教程

HTML5 Canvas 廖雪峰教程

HTML5 Canvas 慕课网教程

HTML5 Canvas的中文系列学习教程

AntV Graphin 图数据库解决方案

AntV Graphin 知识图谱解决方案

AntV Graphin 网络安全解决方案

AntV Graphin 企业风控解决方案

fabric.js

[在线演示] - 轻松处理Canvas元素的框架、Canvas和SVG的转换解析器

DarkroomJS

[在线演示] - 浏览器端可扩展的图像编辑工具

react-design-editor

[在线演示] - 基于React、Fabricjs的编辑设计工具

vue-fabric-editor

[在线演示] - 基于Vue、Fabricjs的编辑设计工具

react-sketch

[在线演示] - 基于React、Fabricjs的素描应用

vue-fabric

基于Fabric.js的Vue组件，定制画板，图片组合绘制

angular-fabric

[在线演示] - 使用AngularJS控制Fabricjs Canvas

fabric-js-editor

基于Fabric.js的HTML5矢量图像编辑器

fabric-brush

[在线演示] - 基于Fabric.js的Canvas笔刷工具

fabricjs-image-editor-origin

[在线演示] - Fabricjs图像编辑器

DrawerJs

[在线演示] - 可定制的所见即所得的HTML Canvas编辑器

myvision

免费的在线图像注释工具，用于生成基于计算机视觉的 ML 训练数据

konva

[在线演示] - 通过扩展2D Context让桌面和移动端Canvas支持交互特性

konva中文文档

vue-konva

基于Vue和konva绘制复杂canvas图形的JS库

react-proto

为开发人员和设计人员的React原型工具应用

two.js

[在线演示] - 一个渲染器无关的Web 2D绘图API

EaselJS

EaselJS是一个用于在HTML5中构建高性能交互式2D内容的库

spritejs

[在线演示] - 一个跨平台的高性能图形系统

concretejs

[在线演示]- 超快、轻量的Canvas框架，支持hit检测、分层、像素比率管理、导出和下载

cax

[在线演示] - 小程序、小游戏以及 Web 通用 Canvas 渲染引擎

wxDraw

[在线演示] - 微信小程序2d动画库

atrament.js

一个小型 JS 库，用于在 HTML Canvas 上进行漂亮的绘图和手绘

origami.js

强大且轻量的Canvas库

react-native-sketch-canvas

[在线演示] - 支持在iOS和Android上触摸绘图React Native组件

mesh.js

[在线演示] - 为可视化而生的图形系统

taro-plugin-canvas

基于 Taro 框架的微信小程序 canvas 绘图组件，封装了常用的操作，通过配置的方式生成分享图片

pencil.js

[在线演示] - 一款很棒的模块化2D交互式绘图库

p5.js

[在线演示] - JS客户端库，用于创建图形和交互体验库

three.js

[在线演示] - 创建易于使用、轻量级、跨浏览器的通用3d js库

zdog

[在线演示] - 基于canvas和SVG设计师友好的伪3D引擎

curtainsjs

[在线演示] - 轻量级的WebGL库，将DOM元素转换为交互式纹理平面

obelisk.js

用HTML5 canvas构建立体图形库

seen

[在线演示] - 使用SVG或Canvas渲染3D场景

Oimo.js

[在线演示] - 轻量级的JS 3D物理引擎

troika

[在线演示] - 用于交互式 3D 和 2D 可视化的 JavaScript 框架

phoria.js

[在线演示] - 用于在 HTML5 画布 2D 渲染器上进行简单 3D 图形和可视化的 JavaScript 库。它不使用 WebGL。适用于所有 HTML5 浏览器，包括桌面、iOS 和 Android

isomer

[在线示例] - 基于HTML5 Canvas的简单等距图形库。

Panolens.js

[在线演示] - Panolens.js基于Three.JS，主要研究领域是全景、虚拟现实和潜在的增强现实。

Pannellum

[在线演示] - 轻量、免费、开源的web全景查看器。

Marzipano

[在线演示] 可让您轻松为您的网站创建 360 度媒体播放器。

JS-Cloudimage-360-View

[在线演示] 一个简单的、交互式的资源，可以用来提供您的产品的虚拟游览。

A-Frame

[在线演示] A-Frame 除了帮助您构建 360 度媒体播放器外，它还提供了许多附加功能。其他功能可帮助您增强网站的虚拟现实体验。

exokit

[在线演示] - 基于JavaScript的原生VR / AR / XR引擎

webvr-boilerplate

[在线演示] - 工作在VR头戴设备的基于Web的VR虚拟体验

matter-js

[在线演示] - 用于web的2D刚体物理引擎

box2d.js

[在线示例] - box2d.js是Box2D物理引擎的JS版本。

p2.js

[在线演示] - JavaScript 2D 物理引擎库。

planck.js

[在线演示] - 2D JS物理引擎

Hilo

[在线演示] - 阿里巴巴集团开发的跨平台HTML5游戏开发解决方案

melonJS

[在线演示] - 一个全新的轻量级javascript游戏引擎

Babylon.js

[在线演示] - 功能强大、美观、简单、开源、封装友好的游戏渲染引擎

taro

[在线演示] - 轻量级3D游戏引擎。

turbulenz_engine

[在线演示] - 用于浏览器PC端和移动端模块化的3D/2D H5游戏框架

eva.js

[在线演示] - 专注于开发互动游戏项目的前端游戏引擎

PlayCanvas

[在线演示] - 使用H5和WebGL技术以及其他3D内容的开源游戏引擎

Sketchbook

[在线演示] - 基于three.js和cannon.js的3D游乐场

Sein.js

[在线演示]- 渐进式网页3D游戏引擎

PuzzleScript

[在线演示] - 开源HTML5益智游戏引擎

LittleJS

[在线演示] - 极小的js游戏引擎

Black

[在线演示] - 世界上最快的H5 2D游戏引擎

pixijs

[在线演示] - H5创建引擎，创建精美数字内容最快、最灵活的2D WebGL渲染器

stage.js

[在线演示] - 用于游戏开发的2D HTML5渲染和布局引擎

Excalibur

[在线演示] - 使用TS编写的易于使用的2D H5游戏引擎

Akihabara

[在线演示] - 制作经典街机风格游戏的游戏引擎

iioEngine

[在线演示] - HTML5 Canvas的Js游戏引擎

cocos2d-js

[在线演示] JS版本的cocos2d-x游戏引擎

Phaser

[在线演示] - 用于桌面和移动端H5游戏制作的2D游戏框架

phaser-examples

包含数百个Phaser HTML5 游戏框架的源代码示例

games

一个基于Phaser的小游戏集合

phaser3-examples

phaser3例子

phaser-ce

有趣、开源、快速且支持Canvas和WebGL渲染的H5 2D游戏框架

phaser3-project-template

Phaser3项目模板

hex-engine

[在线演示] - 一个现代的浏览器2D游戏引擎

GOJS

[在线演示] - 用于流程图、组织图、设计工具、可视化语言等的JS图表库

drawio

[在线演示] - 可配置的流程图应用程序

Drawflow

[在线演示] - 仅用4行代码即可创建基于dom和svg的流程图

Flowy

[在线演示] - 用于创建流程图的最小javascript库

flowchart.js

可以运行在浏览器和终端的流程图DSL和SVG流程图

mermaid

[在线演示] - 通过解析类Markdown语法生成图表和流程图等

wireflow

[在线演示] - 用户流程图实时协作工具

butterfly

[在线演示] - 基于JavaScript/React/Vue2的流程图组件

gantt

[在线演示] - 开源的Javascript甘特图。基于SVG

jQueryGantt

[在线演示] - Jquery甘特图编辑器

Gantt-Chart

[在线演示] - 基于D3的甘特图库

dhtmlxGantt

[在线演示] - GPL版的JS甘特图

gantt-for-react

[在线演示] - 一个简单的React甘特图组件

jquery.ganttView

[在线演示] - 一个可编辑的 jQuery 甘特图插件

wl-gantt

简单易用且高度可配置的甘特图、进度计划项目管理插件

gantt-schedule-timeline-calendar

[在线演示] - ] - 甘特图、时间线、调度图、预订时间线，支持React、Ng、Vue、svelte

OrgChart

[在线演示] - 简单直接的组织图插件

umlet

[在线演示] - 快速制作UML图的免费工具

idraw

[在线示例] - 一个简单的用于在 web 上绘图的 JavaScript 框架

Workflow Designer

[在线示例] - 基于G6和React的可视化流程编辑器

vue-g6-editor

[在线示例] - 基于 G6 和 Vue 的可视化编辑器

X-Flowchart-Vue

[在线演示] - 基于G6和Vue的可视化图形编辑器

web-pdm

[在线示例] - 基于G6的ER图工具，最终目标是在线版的PowerDesigner

ng-antv

基于G6和Angular实现的编辑器。

welabx-g6

[在线示例] - 基于G6和Vue的流程图编辑器

topology

[在线示例] - 轻量（100k左右）且功能丰富的绘图工具（架构图、拓扑图、流程图、UML、脑图等）

excalidraw

[在线示例] - 用于用于素描手绘的虚拟白板

diagram-maker

[在线示例] - 为任何图形类数据提供交互式编辑器的库

x-spreadsheet

[在线演示] - 基于webJavaScript(canvas)Excel表格

Luckysheet

[在线演示] - 在线电子表格，功能强大，配置简单，完全开源

sheetsee.js

可视化谷歌Spreadsheet的数据

SlickGrid

[在线演示] - 极快的JavaScript网格/电子表格

handsontable

[在线演示] - 带电子表格的数据网格，可以在React、Ng、Vue中使用

cheetah-grid

[在线演示] - 最快的网络开源数据表

Jspreadsheet CE

[在线演示] - 创建与其他软件兼容的web端交互式表格和电子表格

canvas-datagrid

[在线演示] - 基于Canvas的数据网格web组件。能够在单个画布元素上显示数百万连续的分层行和列，而无需分页或加载

D3

[在线演示] - D3(或D3.js)是一个用于web标准可视化数据的JS库

awesome-d3

D3非资源集合

angular-charts

基于D3创建Angular创建图表的指令库

nvd3

[在线演示] - 一个用d3.js编写的可重用图表库

c3

[在线演示] - 一个基于D3的可重用图表库

dc.js

[在线演示] - 基于D3使用corssfilter渲染的多维图表

britecharts

[在线演示] - 基于D3.js v5的客户端可重用图表库

neo4jd3

[在线演示] - 使用D3.js的Neo4j图形可视化。

nivo

[在线演示] - 基于React和D3提供了一套丰富的数据可视化组件

echarts

[在线演示] - 一个强大的交互式图表和数据可视化库

v-charts

[在线演示] - 基于 Vue2.0 和 ECharts 封装的图表组件

echarts-for-weixin

Apache ECharts (incubating) 的微信小程序版本

Chart.js

[在线演示] - 给开发和设计人员的简单而灵活的js图表

vue-chartjs

[在线演示] - 基于Chart.js的Vue图表组件

react-chartjs

[在线演示] - 基于chart.js的React图表组件

angular-chart.js

[在线演示] - 基于Chart.js的AngularJS响应式、漂亮的图表库

AntV

蚂蚁集团全新一代数据可视化解决方案

G

[在线演示] - AntV底层的2D/3D渲染引擎，适配Canvas2D/SVG/WebGL/WebGPU

G2

[在线演示] - 一套面向常规统计图表，以数据驱动的高交互可视化图形语法。

G2Plot

[在线演示] - 基于图形语法（the Grammar of Graphics）的图表库

G6

[在线演示] - ♾ G6 是一个简单、易用、完备的图可视化引擎

F2

[在线演示] - 开箱即用的移动端可视化解决方案，完美支持H5，兼容node、小程序、weex

F2Native

[在线演示] - 专注于移动客户端，开箱即用、高性能的可视化解决方案

F6

[在线示例] - F6是一款可以快速、流畅运行于移动设备中的图可视化引擎

X6

[在线演示] - 🚀 X6 是 AntV 旗下的图编辑引擎。

XFlow

[在线示例] - 基于X6、面向React技术栈用户的专业图编辑应用级解决方案

S2

[在线演示] - 数据驱动的多维分析表格。

L7

[在线演示] - 🌎 基于WebGL开源的大规模地理空间数据可视分析开发框架

L7Plot

[在线示例] - 简单易用、图表丰富、支持定制的地理空间图表库

Graphin

[在线示例] - 基于G6封装的React组件库，专注在关系可视分析领域

Ant Design Charts

[在线示例] - 简单好用的 React 图表库。

AVA

[在线示例] - AVA 是为了更简便的可视分析而生的技术框架

Viser

[在线示例] - 基于G2的数据可视化工具包，支持React、Vue和AngularJS

highcharts

[在线演示] - 基于SVG的JavaScript图表库,支持旧浏览器

wx-charts

[在线演示] - 微信小程序图表charts组件

wordcloud2.js

[在线演示] - 2D Canvas/Html词云

chartist-js

[在线演示] - 简单的响应式图表

charts

[在线演示] - 零依赖的、简单的、响应快的、现代SVG图表

flot

[在线演示] - 基于Jquery为工程和科学应用程序派生的JS绘图库

apexcharts.js

[在线演示] - 基于SVG的交互式JavaScript图表

plotly.js

[在线演示] - Ploty和Dash的JavaScript版本的开源图表库

easy-pie-chart

一个轻量级插件，为单个值绘制简单带动画的饼图

react-vis

[在线演示] - React的数据可视化组件

vega

[在线演示] - 可视化语法，使用Vega，您可以用JSON格式描述数据可视化，并使用HTML5 Canvas或SVG生成交互式视图

heatmap.js

基于HTML5 Canvas的Js热力图

zeu

[在线演示] - 用于构建实时电视仪表板、监控UI和物联网Web界面的JS库

HQChart

HQChart - H5, 微信小程序 沪深/港股/数字货币/期货/美股 K线图(kline),走势图,缩放,拖拽,十字光标,画图工具,截图,筹码图

canvas-gauges

[在线演示] - 使用纯 JavaScript 和 HTML5 画布的高度可配置仪表盘。没有依赖性。由于代码库最少，因此适用于物联网设备

lightweight-charts

[在线演示] - 使用H5 Canvas创建的财务轻量级图表

html2canvas

[在线演示] - JS截图插件

dom-to-image

使用HTML5 Canvas从DOM节点生成图像

html-to-image

使用HTML5 Canvas和SVG从DOM节点生成图像。

canvas2image

[在线演示] - 用于保存或转换Canvas为图片的工具

mp_canvas_drawer

[在线演示] - 微信小程序绘图助手，通过json生成分享朋友圈的图片

vue-canvas-poster

[在线演示] - 通过CSS属性生成海报图的轻量级Vue组件

wxa-plugin-canvas

小程序海报组件-生成朋友圈分享海报并生成图片

html2pdf.js

纯JS的客户端HTML生成PDF

rasterizeHTML.js

将HTML渲染到浏览器的Canvas中

JavaScript-Canvas-to-Blob

一个将Canvas元素转换为Blob对象的函数

jsgif

将HTML5 Canvas保存到GIF和动画。一个AS3GIF Gifplayer到JS的港口

whammy

基于Canvas来Hack的实时JS webm编码器

js-imagediff

带有Jasmine匹配器的Canvas图像差异比对程序，用于测试Canvas

canvas2svg

[在线演示] - 将H5 Canvas绘图命令是转换成SVG

canvg

[在线演示] - Canvas上的JS SVG解析器和渲染器

tui.image-editor

[在线演示] - 基于Canvas功能完整的照片图像编辑器。

merge-images

轻松将图像组合在一起，且不会弄脏周围的画布

we-cropper

[在线演示] - 微信小程序图片裁剪工具

miniPaint

[在线演示] - 在线图片编辑器

animockup

[在线演示] - 在浏览器中创建动画模型，并导出为视频或动画GIF

vintageJS

使用HTML5 Canvas元素为图像添加复古/复古效果

glitch-canvas

[在线演示] - 给画布元素添加故障效果

JIC

[在线演示] - 使用Canvas和文件API的JS图像压缩器

context-blender

与Photoshop混合模式功能相同的Canvas上下文

ios-imagefile-megapixel

修复iOS6 Safari的大尺寸图像（超过百万像素）的渲染问题

fast-average-color

[在线演示] - 计算浏览器中图像或视频的主色/平均色的js库

mcanvas

[在线演示] - 用于合成图片的canvas绘制库

canvasfilters

[在线演示] - Canvas图像滤镜

jspaint

[在线演示] - Web版的经典MS Paint翻版

drawingboard.js

[在线演示] - 一个基于画布的绘图应用程序，您可以轻松集成到您的网站上。

drawingboard

[在线演示] - 高级画板—自由绘、直/虚线、箭头、所有几何图形

draw

[在线演示] - 支持钢笔和触摸的Web端Canvas

tldraw

[在线演示] - 一个非常好的画板

signature_pad

[在线演示] - 基于HTML5画布的平滑签名绘图

vue-signature-pad

[在线演示] - Vue版本的签名板

react-signature-pad

React版的签名板

angular-signature

Angular版的签名板

react-native-signature-pad

React-Native版的签名板

signature-pad

[在线演示] - JQ插件，创建基于Canvas的签名板

canvas-draw

[在线演示] - 使用Canvas手写签名或绘图，支持PC、Mobile和横屏

smooth-signature

[在线演示] - H5带笔锋手写签名，支持PC端和移动端，任何前端框架均可使用

wavesurfer.js

[在线演示] - 以Web音频和Canvas的音频波纹

waveforms

一个互动的、可探索的声波纹描绘特效 [在线演示]

siriwave

[在线演示] - JS实现的Apple® Siri 波纹特效

waves

[在线演示] - 模拟海浪效果

waveform-playlist

[在线演示] - 具有画布波形预览的多轨网络音频编辑器和播放器。

wavedrom

[在线演示] - 一个免费的开源在线数字时序图（波形）渲染引擎

Proton

[在线演示] - Javascript粒子动画库

three.proton

[在线演示] - 神奇的3D粒子引擎，使用了three.js库和Proton

bubbly-bg

[在线演示] - 小于 1kB 的漂亮气泡背景(750 字节 gzipped)

react-particle-effect-button

[在线演示] - 基于React的爆裂粒子效果按钮

pasition

[在线演示] - 轻量级 Path 过渡库，可以渲染到任何地方

canvid

[在线演示] - 在Canvas上播放短视频的零依赖JS库

blobity

[在线演示] - 一个效果不错的canvas光标插件

pts

[在线演示] - 一个可视化和创意库

qrious

[在线演示] - 使用Canvas生成二维码的纯JavaScript库

qrcodejs

基于JavaScript的跨浏览器二维码生成器

node-qrcode

二维码生成器

wifi-card

[在线演示] - 打印您连接的 WiFi 二维码(wificard.io)

jsqrcode

[在线演示] - Javascript 二维码生成器

instascan

[在线演示] - 使用网络摄像头的 HTML5 二维码扫描仪

qrcode.react

用于React的二维码组件

qrbtf

[在线演示] - 艺术二维码生成器

Awesome-qr.js

[在线演示] - 一个用 JavaScript 编写的很棒的二维码生成器

jquery-qrcode

JQ二维码独立生成（不依赖于外部服务）

vue-qrcode-reader

[在线演示] - 一组用于检测和解码二维码的 Vue.js 组件

weapp-qrcode

[在线演示] - 在 微信小程序 中，快速生成二维码

qr-image

另一个二维码生成器

jigsaw

[在线演示] - canvas滑动验证码

jq_slideImage

[在线演示] - jQuery滑动拼图验证插件

jigsaw

[在线演示] - canvas滑动验证插件jigsaw

JQuery插件库验证码资源地址

node-canvas

由Cairo支持的Node.js画布实现。

skia-canvas

关于Canvas的Node.js环境

ExplorerCanvas

IE8以前的Canvas环境

paper.js

[在线演示] - 矢量图形脚本的瑞士军刀

react-canvas

将React组件渲染成Canvas而不是DOM

react-native-canvas

React Native Canvas组件

origami.js

强大且轻量的Canvas库

CodePen Canvas特效资源

ANIMPEN 码笔网 Canvas特效资源

JQuery之家 Canvas特效资源

JQuery插件库 Canvas特效资源

CodePen上Canvas相关的你应该关注的人

canvas-confetti

[在线演示] - 一个撒花/纸屑效果插件

lucky-canvas

[在线演示] - 基于 TS + Canvas 开发的【大转盘 / 九宫格】抽奖插件，rainbow 一套源码适配多端框架 JS / Vue / React / Taro / UniApp / 微信小程序等

CanvasInput

[在线演示] - HTML5 Canvas文本输入框

wind-js

[在线演示] - 使用JS API在Canvas中模拟风的演示动画

curvejs

[在线演示] - 魔幻线条

canvas-nest.js

一个基于 html5 canvas 绘制的网页背景效果。

canvas-special

超多经典 Canvas 实例，动态离子背景、炫彩小球、贪吃蛇、坦克大战、是男人就下100层、心形文字等

canvas效果集合

shape-shifter

[在线演示] - 这是一个基于用户输入使用一组粒子来渲染不同形状的画布实验。它支持多种模式:文本，倒计时，时间和图标

canvas-test

小的canvas效果demo

可视化私房菜

可视化国家队的私房菜，用心烹调，以飨读者。

体系化建设 BI 业务定制图表

图可视化知多少

图可视化、图分析及图编辑知识库。

G2Plot 可视化圈子

G2：图形、交互语法

可视化小讲堂

如何看待 Google Docs 将从 HTML 迁移到基于 Canvas 渲染？

@知乎 海蓝

用Canvas画一只会跟着鼠标走的小狗

@知乎 李银城

用Canvas + WASM画一个迷宫

@知乎 李银城

玩转「Canvas」

编程圈 @糖少

JS之使用Canvas绘图

简书 @LemonnYan

一个少女心满满的例子带你入门 Canvas

掘金 @sunshine小小倩

为了让她10分钟入门canvas，我熬夜写了3个小项目和这篇文章

掘金 @Sunshine_Lin

更优雅地基于 canvas 在前端画海报

掘金 @2dunn

【🎨万物皆可动】详解Canvas路径动画

掘金 @ChanningHyl

产品经理：你能不能用div给我画条龙？

掘金 @大帅老猿

Canvas性能优化

掘金 @清夜

为了让你们进阶Canvas，我花7小时写了3个有趣的小游戏！！！

掘金 @Sunshine_Lin

十分钟实现灭霸打响指灰飞烟灭的效果

掘金 @wangzy2019

匠心打造canvas签名组件

@路易斯

zyf214329704