12.1 HTML 画布（Canvas）概述

以前在网页中进行交互绘图是很困难的（需要依赖额外的第三方插件），而引入的Canvas特性使得作者可以很容易的在网页上绘制各种图形和图像。

Canvas提供了脚本（JavaScript）应用接口，我们可以使用JS代码来操作画布，添加各种图形以及实现用户交互。这些特性使得HTML5在开发网页游戏和一些复杂的网页动画上变得更加方便。

比如下面这个例子，使用Canvas实现了简单的在线画板功能，你可以直接在网页上绘制线条：

实际上Canvas规范包含两个部分，一个是HTML5新引入的canvas元素，还有更为关键的2D渲染上下文。实际上前者只是一个容器，后者才是真正绘图的地方。它包含绘图和图形操作所需要的全部方法和丰富功能。 强调一下：绘图是在2D渲染上下文中进行的，而不是在canvas元素中进行。可以通过canvas元素访问和显示2D渲染上下文。

canvas元素的语法很简单，除了id和class外，还有两个和容器尺寸相关的属性：宽和高。

我们接下来先搞清楚2D渲染上下文的用法。