精心收录Canvas相关的资源并整理分类,部分同类资源库也收录SVG/WebGL相关的资源。
- fabric.js [在线演示] - 轻松处理Canvas元素的框架、Canvas和SVG的转换解析器
- DarkroomJS [在线示例] - 浏览器端可扩展的图像编辑工具
- react-design-editor [在线示例] - 基于React、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中文文档
- react-konva [在线演示] - 基于React和konva绘制复杂Canvas图形的JS库
- 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库
-
D3 [在线演示] - D3(或D3.js)是一个用于web标准可视化数据的JS库
- awesome-d3
- angular-charts - 基于D3创建Angular创建图表的指令库
- nvd3 [在线演示] - 一个用d3.js编写的可重用图表库
- c3 [在线演示] - 一个基于D3的可重用图表库
- dc.js [在线演示] - 基于D3使用corssfilter渲染的多维图表
- britecharts [在线演示] - 基于D3.js v5的客户端可重用图表库
- neo4jd3 [在线演示] - 使用D3.js的Neo4j图形可视化。
-
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响应式、漂亮的图表库
-
highcharts [在线演示] - 基于SVG的JavaScript图表库,支持旧浏览器
-
F2 [在线演示] - 一个专注于移动,开箱即用的可视化解决方案,完美支持 H5 环境同时兼容多种环境(node, 小程序,weex)
-
wordcloud2.js [在线演示] - 2D Canvas/Html词云
-
chartist-js [在线演示] - 简单的响应式图表
-
apexcharts.js [在线演示] - 基于SVG的交互式JavaScript图表
-
easy-pie-chart - 一个轻量级插件,为单个值绘制简单带动画的饼图
-
vega [在线演示] - 可视化语法,使用Vega,您可以用JSON格式描述数据可视化,并使用HTML5 Canvas或SVG生成交互式视图
-
heatmap.js - 基于HTML5 Canvas的Js热力图
-
HQChart - HQChart - H5, 微信小程序 沪深/港股/数字货币/期货/美股 K线图(kline),走势图,缩放,拖拽,十字光标,画图工具,截图,筹码图
-
canvas-gauges [在线演示] - 使用纯 JavaScript 和 HTML5 画布的高度可配置仪表盘。没有依赖性。由于代码库最少,因此适用于物联网设备
- 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
- Panolens.js [在线演示] - Panolens.js基于Three.JS,主要研究领域是全景、虚拟现实和潜在的增强现实。
- Pannellum [在线演示] - 轻量、免费、开源的web全景查看器。
- Marzipano [在线演示] 可让您轻松为您的网站创建 360 度媒体播放器。
- JS-Cloudimage-360-View [在线演示] 一个简单的、交互式的资源,可以用来提供您的产品的虚拟游览。
- A-Frame [在线演示] A-Frame 除了帮助您构建 360 度媒体播放器外,它还提供了许多附加功能。其他功能可帮助您增强网站的虚拟现实体验。
- exokit [在线示例] - 基于JavaScript的原生VR / AR / XR引擎
- GOJS [在线演示] - 交互式流程图、组织结构图、设计工具、规划工具、可视化语言的JavaScript图表库
- Drawflow [在线演示] - 仅用4行代码即可创建基于dom和svg的流程图
- Flowy [在线演示] - 用于创建流程图的最小javascript库
- flowchart.js - 可以运行在浏览器和终端的流程图DSL和SVG流程图
- mermaid [在线演示] - 通过解析类Markdown语法生成图表和流程图等
- wireflow [在线演示] - 用户流程图实时协作工具
- butterfly [在线演示] - 基于JavaScript/React/Vue2的流程图组件
- X-Flowchart-Vue [在线演示] - 基于G6和Vue的可视化图形编辑器
- 以下甘特图不基于Canvas实现
- gantt [在线演示] - 开源的Javascript甘特图。基于SVG
- jQueryGantt [在线演示] - Jquery甘特图编辑器
- Gantt-Chart [在线演示] - 基于D3的甘特图库
- gantt-schedule-timeline-calendar [在线演示] - JS甘特图,项目甘特图,时间线,调度图,甘特时间线,预订时间线,React甘特图,Angular甘特图,Vue甘特图,svelte甘特图
- dhtmlxGantt [在线演示] - GPL版的JS甘特图
- gantt-for-react [在线演示] - 一个简单的React甘特图组件
- jquery.ganttView [在线演示] - 一个可编辑的 jQuery 甘特图插件
- wl-gantt - 简单易用且高度可配置的甘特图、进度计划项目管理插件
- x-spreadsheet [在线演示] - 基于webJavaScript(canvas)Excel表格
- Luckysheet [在线演示] - 在线电子表格,功能强大,配置简单,完全开源
- sheetsee.js - 可视化谷歌Spreadsheet的数据
- SlickGrid [在线演示] - 极快的JavaScript网格/电子表格
- handsontable [在线演示] - 带电子表格的数据网格,可以在React、Ng、Vue中使用
- cheetah-grid [在线示例] - 最快的网络开源数据表
- Jspreadsheet CE [在线示例] - 创建与其他软件兼容的web端交互式表格和电子表格
- canvas-datagrid [在线示例] - 基于Canvas的数据网格web组件。能够在单个画布元素上显示数百万连续的分层行和列,而无需分页或加载
- html2canvas [在线演示] - JS截图插件
- dom-to-image - 使用HTML5 Canvas从DOM节点生成图像
- html-to-image - 使用HTML5 Canvas和SVG从DOM节点生成图像。
- canvas2image [在线演示] - 用于保存或转换Canvas为图片的工具
- mp_canvas_drawer [在线演示] - 微信小程序上canvas绘制图片助手,一个json就制作分享朋友圈图片
- vue-canvas-poster [在线示例] - vue生成海报图,通过CSS属性画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
- 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的大尺寸图像(超过百万像素)的渲染问题
- jspaint [在线演示] - Web版的经典MS Paint翻版
- drawingboard.js [在线演示]
- drawingboard [在线演示] - 高级画板—自由绘、直/虚线、箭头、所有几何图形
- draw [在线示例] - 支持钢笔和触摸的Web端Canvas
- signature_pad [在线示例] -
- 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和横屏
- matter-js [在线演示] - 用于web的2D刚体物理引擎
- Hilo [在线演示] - 阿里巴巴集团开发的跨平台HTML5游戏开发解决方案
- melonJS [在线演示] - 一个全新的轻量级javascript游戏引擎
- Babylon.js [在线演示] - 功能强大、美观、简单、开源、封装友好的游戏渲染引擎
- Phaser [在线演示] - 有趣、免费、快速、支持Canvas和WebGL的2D游戏框架,用于为桌面和移动端浏览器H5游戏制作
- phaser-examples - 包含数百个Phaser HTML5 游戏框架的源代码示例
- games - 一个基于Phaser的小游戏集合
- phaser3-examples - phaser3例子
- phaser-ce - Phaser CE 是一个有趣、免费且快速的2D游戏框架,用于为桌面和移动端Web制作HTML5游戏,支持 Canvas和WebGL渲染
- phaser3-project-template - Phaser3项目模板
- taro [在线示例] - 轻量级3D游戏引擎。
- turbulenz_engine [在线示例] - Turbulenz 是一个模块化的 3D 和 2D 游戏框架,用于为浏览器、桌面端和移动端设备制作 HTML5 驱动的游戏。
- wavesurfer.js [在线演示] - 以Web音频和Canvas的音频波纹
- waveforms - 一个互动的、可探索的声波纹描绘特效 [在线演示]
- siriwave [在线演示] - JS实现的Apple® Siri 波纹特效
- waves [在线演示] - 模拟海浪效果
- waveform-playlist [在线演示] - 具有画布波形预览的多轨网络音频编辑器和播放器。
- wavedrom [在线演示] - 一个免费的开源在线数字时序图(波形)渲染引擎
- Proton [在线演示] - Javascript粒子动画库
- three.proton [在线演示] - Three.proton 是一个神奇的 3d 粒子引擎,使用了three.js库和Proton
- bubbly-bg [在线演示] - 小于 1kB 的漂亮气泡背景(750 字节 gzipped)
- react-particle-effect-button [在线演示] - 基于React的爆裂粒子效果按钮
- pasition [在线演示] - 轻量级 Path 过渡库,可以渲染到任何地方
- 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插件库验证码资源地址
- skia-canvas - 关于Canvas的Node.js环境
- ExplorerCanvas - IE8以前的Canvas环境
- paper.js [在线演示] - 矢量图形脚本的瑞士军刀
- react-canvas - 将React组件渲染成Canvas而不是DOM
- react-native-canvas - React Native 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 [在线示例] - 这是一个基于用户输入使用一组粒子来渲染不同形状的画布实验。它支持多种模式:文本,倒计时,时间和图标
- HTML5 Canvas MDN教程
- Internet Explorer 9 开发人员指南:HTML5 Canvas
- Draw on the Web
- Computer Graphics And Visualization
- HTML5草案标准中的Canvas元素文档
- HTML5 Canvas 基础教程
- HTML5 Canvas 菜鸟教程
- HTML5 Canvas W3school教程
- HTML5 Canvas 廖雪峰教程
- HTML5 Canvas 慕课网教程
- CanvasStudy
- 玩转「Canvas」
- JS之使用Canvas绘图
- 一个少女心满满的例子带你入门 Canvas
- 为了让她10分钟入门canvas,我熬夜写了3个小项目和这篇文章
- 更优雅地基于 canvas 在前端画海报
- 【🎨万物皆可动】详解Canvas路径动画
- 产品经理:你能不能用div给我画条龙?
- Canvas性能优化 - 掘金 @清夜
- 为了让你们进阶Canvas,我花7小时写了3个有趣的小游戏!!! - 掘金 @Sunshine_Lin
- 十分钟实现灭霸打响指灰飞烟灭的效果 - 掘金 @wangzy2019
- 匠心打造canvas签名组件 - @路易斯
感谢以下人员对项目的贡献^V^: