超赞的Canvas
精选的超赞Canvas示例、相关文章和帖子列表。灵感来自awesome-python。
贡献
请先快速浏览一下贡献指南。
目录
Canvas
定义
"HTML5新增的HTML <canvas>元素可以通过JavaScript脚本用于绘制图形。例如,它可以用来绘制图表、制作照片合成、创建动画,甚至进行实时视频处理或渲染。"——Mozilla开发者网络
示例
一些使用canvas创作的优秀示例。
- 30,000个粒子 [查看代码] • 使用Canvas 2D创建高性能粒子的研究结果。
- Canvas颜色循环 [查看代码] • 这个演示是一个完整的8位颜色循环引擎的实现,实时渲染到HTML5 Canvas中。
- Canvas加载器 [查看代码] • 使用canvas制作加载器的参考。
- 圆环 [查看代码] • 一个关于如何使用canvas创建圆环的精彩示例。
- 3D布料效果(强烈推荐使用Google Chrome) • 这个演示使用球面环境映射技术渲染了一个苹果iPod的3D模型。
- 布料效果 [查看代码] • 一个3D布料效果的分支。
- 彩色粒子 [查看代码] • 展示如何生成随机粒子的实验。非常简单的代码,易于理解。
- 距离场波浪 [查看代码] • 一个关于GPU渲染着色器实验的例子,使用光线行进和距离场(也称为"球体追踪")渲染技术进行程序化3D场景生成。
- 绘制表格 - [查看代码] • 一个使用canvas的简单事件示例。
- 纤维质地 [查看代码] • 简单的基于canvas的动画;绘制随机线条。形成有趣的纸质图案,每次迭代都会变得更加详细。
- 图像节点 [查看代码] • 由图像数据构建的交互式节点。使用鼠标来玩耍。
- 盗梦空间 [查看代码] • 生成一个城市的草图,一个HTML5 canvas实验。基于电影《盗梦空间》
- JS元球体 [查看代码] • Chrome的实验。混合使用webkit-filter和canvas来实现元球体效果。
- Just Canvas [查看代码] • 这是一个捕捉动作的JavaScript实验。Just Dance创意 + HTML5 Canvas实现。
- Linjer • 关于节点效果加上布料和动画效果的惊人实验。
- 液体粒子 • 一个关于液体粒子的好例子。
- LucidChart • 一个完整的工具,用于绘制图表和其他几何形状,使用canvas制作。
- L系统海龟分形渲染器 • 一个使用canvas的分形渲染器示例。
- 矩阵动画 [查看代码] • 使用canvas的矩阵雨动画。
- 运动图形字体 [查看代码] • 一个关于字体动画的例子。
- Neatnait Canvas雨 [查看代码] • 创建雨滴粒子的参考。
- 粒子 [查看代码] • 创建惊人粒子效果的参考。
- Particles.js [查看代码] • 使用canvas创建的美丽粒子。
- 乒乓球游戏 [查看代码] • 除了是一个很好的示例,它还是一个关于使用canvas制作游戏的教程。
- 海盗爱雏菊 • 一个完全使用canvas创建的游戏
- PixelCraft • 一个使用canvas制作的像素艺术编辑器
- 下雨天 [查看代码] • 使用canvas制作的雨滴效果。这是Neatnait Canvas Rain的分支。
- 太空面条 • 关于线条移动和动画的精彩示例。
- 星空延时效果 [查看代码] • 一个使用canvas创建星空延时效果的示例。
- 微风中的树 [查看代码] • 在canvas中生成2D树木的演示。
- 三角派对! [查看代码] • 简单的三角函数可视化。
- tsParticles示例 tsParticles粒子动画样本集合
- 视频破坏 • HTML5视频的块状破坏效果,在基于webkit的浏览器中效果最佳。
- 雨刷 [查看代码] • 使用canvas为雨刷赋予生命。
- 3D洛伦兹吸引子 [查看代码] • 一个简单的canvas示例,展示了洛伦兹吸引子
- HTML5 Canvas中的3D运动 [查看代码] • 关于向量位置和运动的优秀示例。
- 3D宇宙飞船 • 使用canvas制作并旋转的宇宙飞船。
- 蠕虫 • 粒子实验。
库
用于绘制画布
- Akihabara 是一个HTML5游戏库,用于使用JavaScript和canvas标签制作像素风格的游戏。
- Chart.js 是一个轻量级JavaScript库,用于使用HTML5 Canvas元素创建动态和视觉吸引力的图表。
- ChemDoodle 是一个开源的化学和化学信息学工具包,其中canvas被用来解决常见的化学相关任务,以各种不同的方式显示分子。
- d3(或D3.js)是一个使用Web标准可视化数据的JavaScript库。D3帮助你使用SVG、Canvas和HTML将数据带入生活。
- EaselJS 是一个JavaScript库,使使用HTML5 Canvas元素变得容易。适用于创建游戏、生成艺术和其他高度图形化的体验。EaselJS是CreateJS的一部分 - 一个模块化的库和工具,可以一起或独立工作,通过HTML5在开放Web技术上实现丰富的交互内容。
- fabric.js 在canvas元素之上提供交互式对象模型,还有SVG到canvas(和canvas到SVG)的解析器。
- iio.js - 一个加速HTML5 Canvas应用程序创建和部署的JavaScript库。
- isomerjs - 一个用于HTML5 canvas的等轴测图形库。
- Javascript-Voronoi - Fortune算法的JavaScript实现,用于计算Voronoi单元。
- Konva - Konva.js是一个HTML5 Canvas JavaScript框架,通过为桌面和移动应用程序启用canvas交互性来扩展2d上下文。
- Origami.js - 用于重新设计canvas API接口的JS库。
- p5.js - p5.js是一个用于创建图形和交互体验的JS客户端库。
- Paper.js - Scriptographer移植到JavaScript和浏览器,使用HTML5 Canvas。
- Pencil.js - 具有清晰OOP语法和大量功能的优秀模块化JavaScript库。
- Pixi.js - 超快的HTML 5 2D渲染引擎,使用webGL,并以canvas作为后备。
- Processingjs 是一种数据可视化编程语言。
- Proton 是一个轻量级且强大的JavaScript粒子引擎。使用它,你可以轻松创建无数酷炫效果。
- Pts.js - Pts是一个用于可视化和创意编码的JavaScript库。
- Rough.js - Rough.js是一个图形库,让你以草图、手绘风格绘图。
- Scrawl-canvas - 轻松将多个响应式、可访问和交互式的<canvas>元素添加到网页。
- Sketch - 跨平台JavaScript创意编码框架。
- Three.js 是一个使WebGL在浏览器中实现3D的JavaScript库,但你也可以使用canvas而不是WebGL进行渲染。
- tsParticles 是一个轻量级库,用于轻松创建粒子动画。它包含了最常用的JavaScript框架(ReactJS、VueJS、Angular等)的即用组件。
- Visualize 是一个JQuery插件,使用HTML canvas元素从表格数据创建图表和图形。
- zDog - 扁平、圆润、设计师友好的伪3D引擎,用于canvas和SVG。
- ZIM - ZIM是一个通用Canvas框架,具有简单而强大的JavaScript,让从初学者到专业人士的每个人都能编写创意代码。
- zrender - 一个轻量级canvas库,为Apache ECharts(孵化中)提供2D绘图。
用于其他目的,但仍使用canvas
- React Canvas - 用于React组件的高性能
资源
在哪里可以发现更多关于Canvas的信息。
讲座
- Google I/O 2012 - GRITS:使用HTML的PvP游戏,作者Colton McAnlis
- 移动HTML5图形性能,作者Sam Abadir
- HTML5平台游戏的制作,作者David Geary
- HTML5高性能移动网页游戏开发,作者Sangmin Shim
- 使用Javascript进行HTML5 Canvas动画制作,作者Josh Robertson
书籍
- HTML5 Canvas,作者Steve Fulton和Jeff Fulton - O'Reilly出版社。更新版本:第二版
- HTML5 Canvas傻瓜书,作者Don Cowan
- HTML5 Canvas基础:游戏与娱乐,作者Rob Hawkes
- HTML5 Canvas食谱,作者Eric Rowell
- HTML Canvas深度探索,作者Josh Marinacci
- @jeresig - Processing.js的创建者
- @mrdoob - three.js的创建者
- @soulwire - sketch.js的创建者,并积极创作和分享canvas/WebGL实验
- @spielzeugz - 积极创作和分享canvas实验
- @paul_irish - 活跃贡献者,撰写了一篇关于requestAnimationFrame的参考文章
- @end3r - HTML5游戏开发者和EnclaveGames独立工作室创始人
网站和教程
- Mozilla开发者网络Canvas教程 - 本教程介绍了如何使用
- HTML5 Canvas教程
- 31天Canvas学习
- Dev.Opera: HTML5 Canvas基础 - 本文带您了解实现2D canvas上下文的基础知识,以及使用基本canvas功能,包括线条、基本形状、图像、文本等。假定您已经掌握了JavaScript基础知识。
- 打砖块 - 这是一个针对任何想学习canvas编程的人的绝佳教程,作者详细介绍了创建打砖块克隆游戏所需的步骤。教程包含12个非常清晰简洁的步骤,您可以查看每个阶段项目应该呈现的效果演示。
- David Walsh的Canvas演示 - 9个令人惊叹的Canvas演示及其相应的源代码。
- Canvas中的程序化绘图 - 一个教程,详细解释了程序化绘图的工作原理,以便其他人也能学习这项技能并开始制作自己的图案。
- HTML5草案标准中的canvas元素
- 面向开发者的Internet Explorer 9指南:HTML5 canvas元素
- 使用HTML5和canvas加速游戏编程 - 本教程描述了JavaScript中典型游戏类的结构、在canvas上绘图、双缓冲、地图/瓦片表示和玩家移动。
- 懒惰游戏开发者的物理学 - 提供了速度、加速度、碰撞、旋转和粒子效果的示例。
- 使用HTML5 Canvas绘制粒子 - 简明教程展示如何创建简单而多彩的粒子。
- 使用HTML5和JavaScript创建游戏角色 - 第1部分
- 使用HTML5和JavaScript创建游戏角色 - 第2部分
- 可汗学院 - 编码绘画一小时
- 用JavaScript制作月球着陆器 - 一个包含5节课的教程,解释如何用JavaScript制作月球着陆器游戏。
- W3Schools Canvas教程 - 涵盖各种功能和方法的教程,并提供许多实用示例
许可
本项目的内容本身采用知识共享署名3.0许可协议授权。