Question

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”参数。

FAQ

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) 清除指定的矩形。

FAQ

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 的坐标系统。