添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接

Repository files navigation

awesome-canvas

精心收录Canvas相关的资源并整理分类,部分同类资源库也收录SVG/WebGL相关的资源。

目前最好的Canvas中文资源,项目还在持续收录中......

简体中文 | English

  • awesome-canvas
  • VR/AR
  • 插件资源网站
  • 效果/案例
  • Web绘图
  • 图可视化美学
  • 计算机图形与可视化
  • HTML5 Canvas MDN教程
  • Internet Explorer 9 开发人员指南:HTML5 Canvas
  • HTML5草案标准中的Canvas元素文档
  • HTML5 Canvas 基础教程
  • HTML5 Canvas 菜鸟教程
  • HTML5 Canvas W3school教程
  • HTML5 Canvas 廖雪峰教程
  • HTML5 Canvas 慕课网教程
  • HTML5 Canvas的中文系列学习教程
  • AntV Graphin 图数据库解决方案
  • AntV Graphin 知识图谱解决方案
  • AntV Graphin 网络安全解决方案
  • AntV Graphin 企业风控解决方案
  • HTML5 Canvas开发详解 》 作者: Steve Fulton,Jeff Fulton 链接地址🔗
  • TypeScript图形渲染实战:2D架构设计与实现 》 作者: 步磊峰 链接地址🔗
  • HTML5 Canvas核心技术:图形、动画与游戏开发 》 作者: David Geary
  • HTML5 2D游戏编程核心技术 》 作者: David Geary
  • HTML5 Canvas游戏开发实战 》 作者: 张路斌 链接地址🔗
  • 从0到1 HTML5 Canvas动画开发 》 作者: 莫振杰 链接地址🔗
  • HTML5 Canvas核心技术: 图形、动画与游戏开发 》 作者: 美基瑞 链接地址🔗
  • 快学熟用D3 》 作者: 菲利普·K.贾纳特 链接地址🔗
  • 如何使用 Canvas 制作出炫酷的网页背景特效 》 作者: sunshine小小倩 链接地址🔗
  • 可视化入门:从 0 到 1 开发一个图表库 》 作者: AntV 链接地址🔗
  • 图分析与可视化 》 作者: 理查德·布莱斯 / 大卫·琼克 链接地址🔗
  • 视觉繁美 - 信息可视化方法与案例解析 》 作者: Manuel Lima 链接地址🔗
  • 数据可视化 》 作者: 陈为 / 沈则潜 链接地址🔗
  • 从0-1入门数据可视化 》 作者: Fly
  • 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中文文档
  • 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库
  • 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的简单等距图形库。
  • VR/AR

  • 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的流程图组件
  • 以下甘特图不基于Canvas实现
  • 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
  • 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组件
  • origamijs - 强大且轻量级的创建HTML5 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签名组件 - @路易斯
  • 感谢以下人员对项目的贡献^V^:

  • zyf214329704
  •