Canvas

<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);

编辑下面的代码，查看画布的变化:

<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
  <input id="edit" type="button" value="Edit" />
  <input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code">
ctx.fillStyle = "green";
ctx.fillRect(10, 10, 100, 100);</textarea>

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var textarea = document.getElementById("code");
var reset = document.getElementById("reset");
var edit = document.getElementById("edit");
var code = textarea.value;
function drawCanvas() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  eval(textarea.value);
}
reset.addEventListener("click", function() {
  textarea.value = code;
  drawCanvas();
});
edit.addEventListener("click", function() {
  textarea.focus();
})
textarea.addEventListener("input", drawCanvas);
window.addEventListener("load", drawCanvas);

参考

与 WebGLRenderingContext 有关的接口请参考 WebGL.

教程与指导

Canvas 教程

包括了<canvas>的基本用法与高级功能的综合性教程。

代码片段: Canvas

一些面向开发者的 <canvas> 代码片段。

光线追踪Demo

运用canvas制作的光线追踪动画示例。

在canvas上绘制DOM对象

如何在canvas上绘制DOM内容，如HTML元素。

使用canvas绘制图形 

结合<video>和 <canvas>来实现实时操作视频数据。

资源

通用

• 深入HTML5 Canvas
• 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 开源库

标准

其它相关

• WebGL