Canvas

Awesome Canvas¶

很棒的 Canvas 示例、相关文章和帖子的精选列表. 灵感来自 awesome-python.

Contributing¶

Summary¶

Canvas¶

Definition¶

“在 HTML5 中添加的 HTML <canvas> 元素可用于通过 JavaScript 脚本绘制图形.例如，它可用于绘制图形、制作照片组合、创建动画甚至进行实时视频处理或渲染. “ 经过 Mozilla Developer Network

Examples¶

关于用画布创作的一些很好的例子.

30.000 particles [show me the code] • 使用 Canvas 2D 创建高性能粒子的研究结果.
Canvas Colour Cycling [show me the code] • 该演示是一个完整的 8 位颜色循环引擎的实现，实时渲染到 HTML5 Canvas 中.
Canvas Loader [show me the code] • 参考使用画布制作装载机.
Circular Rings [show me the code] • 关于如何使用画布创建圆环的一个很好的例子.
Cloth 3D Effect （强烈推荐谷歌浏览器） • Thid 演示使用球体环境映射技术渲染 Apple iPod 的 3d 模型.
Cloth Effect [show me the code] • 布3D效果叉.
Colorful Particles [show me the code ] • 实验展示如何生成随机粒子. 非常简单的同化代码.
Distance Field Waves [show me the code] • 关于 GPU 渲染着色器实验的示例，使用光线行进和距离场（也称为“球体跟踪”）渲染技术进行程序 3D 场景生成.
Draw Table - [show me the code] • 关于使用画布的事件的简单示例.
Fibrous Texture [show me the code ] • 简单的基于画布的动画；在场地上绘制随机线条. 制作一个有趣的纸质图案，每次迭代都会变得越来越详细.
Image Nodes [show me the code ] • 从图像数据构建的交互式节点. 使用鼠标播放.
Inception [show me the code ] • 生成城市的涂鸦，画布 HTML5 实验. 基于电影《盗梦空间》
JS Metaballs [show me the code ] • 对 Chrome 进行实验. 混合 webkit-filter 和 canvas 以获得元球效果.
Just Canvas [show me the code ]• 这是一个捕捉动作的JavaScript 实验. Just Dance Idea + HTML5 Canvas 实现.
Linjer • 关于节点效果以及布料和动画效果的惊人实验.
Liquid Particles • 关于液体粒子的一个很好的例子.
LucidChart • 用于绘制图表和其他几何图形的完整工具，由画布制成.
L-System Turtle Fractal Renderer • 一个关于使用画布的分形渲染器的例子.
Motion Graphic Typeface [show me the code] • 一个关于字体动画的例子.
Neatnait Canvas Rain [show me the code] • 参考创建雨粒子.
Particles [show me the code] • 参考创建惊人的粒子.
Particles.js [show me the code] • 使用画布创建美丽的粒子.
Ping Pong Game [show me the code] • 除了是一个很好的例子，它也是一个关于用画布制作游戏的教程.
Pirates Love Daisies • 使用画布创建的整个游戏
PixelCraft • 使用画布制作的像素艺术编辑器
Raining Day [show me the code ] • 使用画布制作雨滴. 这是 Neatnait 帆布雨叉.
Space Noodles • 关于线条移动和动画的精彩示例.
Star Time Lapse Effect [show me the code] • 关于使用画布创建星空延时天空的示例.
Tree in the Breeze [show me the code] • 关于在画布中生成二维树的演示.
Trigonoparty! [show me the code] • 简单的三角函数可视化.
tsParticles examples Collection of tsParticles 粒子动画样本
Video Destruction • 基于块的HTML5 视频破坏，最好在基于webkit 的浏览器中观看.
Wipers [show me the code] • 雨刷用帆布接受生活.
3D Lorenz Atractor [show me the code] • 一个简单的画布示例，显示了洛伦兹吸引子
3D Movement in HTML5 Canvas [show me the code] • 关于矢量位置和运动的优秀示例.
3D Space Craft • 用帆布制作并旋转的太空船.
Wormz • 粒子实验.

Libraries¶

To draw using canvas¶

Akihabara 是 HTML5 游戏库，用于使用 Javascript 和 canvas 标签制作基于像素的游戏.
ChemDoodle 是一个开源化学和化学信息学工具包，其中画布用于解决常见的化学相关任务，以各种不同的方式显示分子.
d3 （或 D3.js）是一个 JavaScript 库，用于使用 Web 标准可视化数据. D3 帮助您使用 SVG、Canvas 和 HTML 使数据栩栩如生.
EaselJS 是一个 JavaScript 库，它使使用 HTML5 Canvas 元素变得容易. 可用于创建游戏、生成艺术和其他高度图形化的体验. EaselJS 是 CreateJS 的一部分——一个模块化的库和工具，它们可以协同或独立地工作，以通过 HTML5 在开放网络技术上启用丰富的交互式内容.
fabric.js 在 canvas 元素之上提供交互式对象模型并且还有 SVG-to-canvas（和 canvas-to-SVG）解析器
iio.js - 一个 javascript 库，可加速 HTML5 Canvas 应用程序的创建和部署
isomerjs - 用于 HTML5 canvas 的等距图形库
Javascript-Voronoi - 用于计算 Voronoi 单元的 Fortune 算法的 Javascript 实现
Konva - Konva.js 是一个 HTML5 Canvas JavaScript 框架，它通过为桌面和移动应用程序启用画布交互性来扩展 2d 上下文.
Origami.js - 重新设计 canvas API 接口的 JS Lib
p5.js - p5.js 是一个用于创建图形和交互体验的 JS 客户端库
Paper.js - Scriptographer 使用 HTML5 Canvas 移植到 JavaScript 和浏览器.
Pencil.js - 不错的模块化 Javascript 库，具有清晰的 OOP 语法和许多功能.
Pixi.js - 超快的 HTML 5 2D 渲染引擎，使用带有画布后备的 webGL
Processingjs 是一种数据可视化编程语言.
- Overview
- 91 basic demos
Proton 是一个轻量级且功能强大的 javascript 粒子引擎. 有了它你可以轻松打造出无数酷炫效果
Pts.js - Pts 是一个用于可视化和创意编码的 JavaScript 库.
Rough.js - Rough.js 是一个图形库，可让您以类似手绘的粗略风格进行绘画
Scrawl-canvas - 轻松地向网页添加多个响应性、可访问性和交互性的 <canvas> 元素
Sketch - 跨平台 JavaScript 创意编码框架
Three.js 是一个在浏览器中制作 WebGL - 3D 的 javascript 库，但是你可以 render using canvas instead of WebGL
- Introduction
- Some amazing examples
tsParticles 是一个轻量级的库，用于轻松创建粒子动画. 它包括最常用的 Javascript 框架（ReactJS、VueJS、Angular 等）的即用型组件.
Visualize 是一个 JQuery 插件，它使用 HTML canvas 元素从表格数据创建图表和图形.
zDog - 用于画布和 SVG 的平面、圆形、设计者友好的伪 3D 引擎
zrender - 一个为 Apache ECharts 提供二维绘图的轻量级画布库（孵化中）

For other purposes, but still use canvas¶

React Canvas - 高性能

Resources¶

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

Talks¶

Books¶

HTML5 Canvas 史蒂夫富尔顿，杰夫富尔顿 - 奥莱利. 更新： 2^nd Edition
HTML5 Canvas For Dummies 通过唐考恩
Foundation HTML5 Canvas: For Games and Entertainment 通过罗伯·霍克斯
HTML5 Canvas Cookbook ——埃里克·罗威尔
HTML Canvas Deep Dive - 乔什·马里纳奇 (Josh Marinacci)

Twitter¶

@jeresig - 的创造者 Processing.js
@mrdoob - 的创造者 three.js
@soulwire - 的创造者 sketch.js 并积极创建和共享 canvas/WebGL 实验
@spielzeugz - 积极创建和分享画布实验
@paul_irish - 积极的贡献者并写一个 reference post about requestAnimationFrame
@end3r - HTML5 游戏开发者和 EnclaveGames 独立工作室创始人

Websites and Tutorials¶

Mozilla Developer Network Canvas Tutorial - 本教程介绍了如何使用
HTML5 Canvas Tutorials
31 days of canvas
Dev.Opera: HTML5 Canvas — the Basics - 本文将带您了解实现 2D 画布上下文和使用基本画布功能（包括线条、基本形状、图像、文本等）的基础知识. 假定您已经掌握了 JavaScript 基础知识.
Breakout - 适合任何画布编程爱好者的精彩教程，他在其中完成了创建 Breakout 克隆所需的步骤. 本教程包含 12 个非常清晰简洁的步骤，您可以在其中查看项目到目前为止的外观演示.
Canvas Demos by David Walsh - 9 个令人兴奋的 Canvas 演示及其各自的源代码.
Procedural Drawing in Canvas - 一个教程，更多地解释程序绘图的工作原理，以便其他人也可以学习该技能并开始制作自己的图案.
The canvas element in the HTML5 draft standard
Internet Explorer 9 Guide for Developers: HTML5 canvas element
Accelerated Game Programming with HTML5 and canvas - 本教程描述了 JavaScript 中典型游戏类的结构、绘制到画布、双缓冲、地图/图块表示和玩家移动.
Physics for Lazy Game Developers - 提供速度、加速度、碰撞、旋转和粒子效果的示例.
Draw Particles using HTML5 Canvas - 快捷教程展示了如何创建简单而多彩的粒子.
Create a game chracter with HTML5 and JavaScript - Part 1
Create a game chracter with HTML5 and JavaScript - Part 2
Khan Academy - Hour of Drawing with Code
Making a Lunar Lander in JavaScript - 一个 5 节课的教程，解释了如何用 JavaScript 制作 Lunar Lander 游戏.
W3Schools Canvas Tutorial - 涵盖各种功能和方法的教程以及许多实际示例

License¶

该项目本身的内容是根据 Creative Commons Attribution 3.0 license.