超赞的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 是一种数据可视化编程语言。
- 概述
- 91个基本演示
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>渲染。

资源

在哪里可以发现更多关于Canvas的信息。

讲座

书籍

HTML5 Canvas，作者Steve Fulton和Jeff Fulton - O'Reilly出版社。更新版本：第二版
HTML5 Canvas傻瓜书，作者Don Cowan
HTML5 Canvas基础：游戏与娱乐，作者Rob Hawkes
HTML5 Canvas食谱，作者Eric Rowell
HTML Canvas深度探索，作者Josh Marinacci

Twitter

@jeresig - Processing.js的创建者
@mrdoob - three.js的创建者
@soulwire - sketch.js的创建者，并积极创作和分享canvas/WebGL实验
@spielzeugz - 积极创作和分享canvas实验
@paul_irish - 活跃贡献者，撰写了一篇关于requestAnimationFrame的参考文章
@end3r - HTML5游戏开发者和EnclaveGames独立工作室创始人

网站和教程

Mozilla开发者网络Canvas教程 - 本教程介绍了如何使用<canvas>元素绘制2D图形，从基础开始。提供的示例将为您展示可以用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教程 - 涵盖各种功能和方法的教程，并提供许多实用示例