HTML 5 将<canvas>元素定义为“一种分辨率相关的位图画布，可以用于渲染图表、游戏图像以及其它可视元素。”canvas 在页面上表现为一个矩形，你可以在上面使用 JavaScript 绘制任何需要的东西。
浏览器对 canvas 的支持
| IE | Firefox | Safari | Chrome | Opera | iPhone | Android |
| 7.0+* | 3.0+ | 3.0+ | 3.0+ | 10.0+ | 1.0+ | 1.0+ |
| IE 7.0 和 8.0 需要使用第三方 JS 库explorercanvas；IE9 原生支持。 | ||||||
那么，canvas 是什么样子的呢？什么都没有。对，就是这样。一个<canvas>元素没有任何内容，也没有自己的边框。下面是一个原始的 canvas 标签在页面的表现（注意，本页面中已经插入了 canvas 标签，如果要正常浏览本页面内容，请注意你的浏览器支持 canvas）：
看不到吗？下面就是我们的代码：
<canvas width="300" height="225"></canvas>
为了能够显示出这个 canvas，我们给它增加一个边框：
你可以在同一个页面放置多个<canvas>标签。每一个 canvas 都会被添加到 DOM 中，都维护着自己的状态。如果你给每一个 canvas 一个 id，那么就可以同其他元素一样使用 id 访问到：
<canvas id="a" width="300" height="225"></canvas>
然后使用正常的 JS 语句访问：
var a_canvas = document.getElementById("a"); 简单图形
canvas 一开始都是空白的，真令人讨厌！那么，我们就试着画点什么吧！
当我们点击按钮之后，实际上是调用了这段代码：
function draw_b() {
var b_canvas = document.getElementById("b");
var b_context = b_canvas.getContext("2d");
b_context.fillRect(50, 25, 150, 100);
} 第一行没有什么特别的，仅仅是使用document.getElementById()获取这个 canvas 对象。下面我们看第二行。每一个 canvas 都有一个上下文 context。我们所有的绘制操作都是使用的这个 context 的函数。一旦你访问到 canvas 对象（不管是通过document.getElementById()或者其他什么函数），你就能够调用其getContext()函数，以便获取这个 context。getContext()函数必须传进“2d”参数。
Q: 有 3d 的 context 吗？
A: 目前还没有。浏览器厂商可以定义自己的三维上下文，但是这些都不是标准的。HTML5 标准这样描述这个问题：“在未来的版本中，可能会有三维的上下文。”
于是，你有一个<canvas>元素，然后获取其绘图上下文。所有绘制函数和属性都在这个 context 中进行定义。比如，我们有一系列属性和方法用于绘制矩形：
fillStyle属性接受 CSS 颜色、平铺或者渐变（我们会在后文中仔细讨论渐变）。默认的fillStyle是纯黑色，但是你可以定义成任何颜色。每一个绘制上下文都会记住其属性，只要这个页面是打开的，除非你自己将其重置。fillRect(x, y, width, height)使用当前的 fill style 填充一个矩形。strokeStyle属性就像fillStyle，它也接受 CSS 颜色、平铺或者渐变。strokeRect(x, y, width, height)使用当前的 stroke style 绘制一个矩形。strokeRect不会填充矩形，仅仅绘制矩形的边框。clearRect(x, y, width, height)清除指定的矩形。
Q: 我能够“重置”画布吗？
A: 当然可以。设置
<canvas>标签的宽或者高都可以清楚其内容，并且将其 context 的属性重置为默认。你不需要改变其宽度或者高度的值，仅仅向下面代码这样：
var b_canvas = document.getElementById("b");
b_canvas.width = b_canvas.width; 回到我们前面的例子：
b_context.fillRect(50, 25, 150, 100);
我们调用fillRect()方法使用当前的填充风格 fill style 填充一个矩形，就像前面我们说的，默认的 fill style 就是纯黑色。这个矩形左上角在 (50, 25)，宽 (150)，高 (100)。为了更好理解这种绘制，我们将详细介绍下 canvas 的坐标系统。
