<canvas> 是 HTML5 新增的元素，可用于通过使用JavaScript中的脚本来绘制图形。例如，它可以用于绘制图形，制作照片，创建动画，甚至可以进行实时视频处理或渲染。
Mozilla 程序从 Gecko 1.8 (Firefox 1.5) 开始支持 <canvas>。它首先是由 Apple 引入的，用于 OS X Dashboard 和 Safari。Internet Explorer 从IE9开始<canvas> ，更旧版本的IE可以引入 Google 的 Explorer Canvas 项目中的脚本来获得<canvas>支持。Chrome和Opera 9+ 也支持 <canvas>。
WebGL也使用<canvas>元素在网页上绘制硬件加速的3D图形。
示例
这只是一个使用 CanvasRenderingContext2D.fillRect() 方法简单的代码片段。
HTML
<canvas id="canvas"></canvas>
JavaScript
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 100, 100);
编辑下面的代码，查看画布的变化:
参考
与 WebGLRenderingContext 有关的接口请参考 WebGL.
教程与指导
- Canvas 教程
- 包括了<canvas>的基本用法与高级功能的综合性教程。
- 代码片段: Canvas
- 一些面向开发者的 <canvas> 代码片段。
- 光线追踪Demo
- 运用canvas制作的光线追踪动画示例。
- 在canvas上绘制DOM对象
- 如何在canvas上绘制DOM内容，如HTML元素。
- 使用canvas绘制图形
- 结合
<video>和<canvas>来实现实时操作视频数据。
资源
通用
库
- Fabric.js 具有SVG解析功能的开源canvas库
- Kinetic.js 专注于桌面与移动应用中的交互操作的开源canvas库
- Paper.js 运行于HTML5 Canvas上的开源矢量图形脚本框架
- Origami.js 开源的轻量的canvas库
- libCanvas 强大轻量的canvas框架
- Processing.js 用于处理可视化语言
- PlayCanvas 一个开源的游戏引擎
- Pixi.js 一个开源的游戏引擎
- PlotKit 图表库
- Rekapi 关键帧动画库
- PhiloGL 用于数据可视化，创意编程和游戏开发的WebGL框架
- JavaScript InfoVis Toolkit 创建交互式的2D Canvas数据可视化
- EaselJS 类Flash API的canvas库
- Scrawl-canvas 用来创建2d图形的开源库
- heatmap.js 基于 heatmaps 的 canvas 开源库
来源：https://www.cnblogs.com/ylcms/p/7251020.html