12.1 HTML 画布(Canvas)概述

Canvas元素用来支持在网页上绘制图形图像

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

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

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

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

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

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