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>。

<canvas>元素也可被WebGL用作网页上的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绘制图形 (将合并到主教程中)

一篇canvas的介绍，大部分内容被 Canvas教程 所替代。

资源

通用

• 深入HTML5 Canvas
• Canvas小抄 (PNG / PDF)
• Canvas手册

库

• Fabric.js 具有SVG解析功能的开源canvas库
• Kinetic.js 专注于桌面与移动应用中的交互操作的开源canvas库
• Paper.js 运行于HTML5 Canvas上的开源矢量图形脚本框架
• libCanvas 强大轻量的canvas框架
• Processing.js is a port of the Processing visualization language
• EaselJS 类Flash API的canvas库
• PlotKit 图表库
• Rekapi 关键帧动画库
• PhiloGL 用于数据可视化，创意编程和游戏开发的WebGL框架
• JavaScript InfoVis Toolkit 创建交互式的2D Canvas数据可视化
• Frame-Engine 开发应用与游戏的库

标准

其它相关

• WebGL