Canvas是什么？

在HTML5出现之前，如果你想在网页上显示图像，只能使用HTML提供的原生方案＜img＞标签。用这个标签显示图像虽然简单，但只能显示静态的图片，不能进行实时绘制和渲染。因此，后来出现了一些第三方解决方案，如Flash Player等。

HTML5的出现改变了一切，它引入了＜canvas＞标签，允许JavaScript动态地绘制图形。

艺术家们将画布（canvas译为“画布”）作为绘画的地方，类似地，＜canvas＞标签定义了网页上的绘图区域。有了＜canvas＞，你就可以使用JavaScript（而不是画笔和颜料）绘制任何你想画的东西。＜canvas＞提供一些简单的绘图函数，用来绘制点、线、矩形、圆等等。图2.1展示了一个基于＜canvas＞的绘图板程序。

图2.1　使用＜canvas＞标签的绘图板程序示例（http://caimansys.com/painter/）

这个绘图板程序运行在网页上，你可以在上面绘制线段、矩形、圆，甚至可以改变它们的颜色。

目前你还没有能力创建如此复杂的应用程序，我们就来通过一个简单的示例程序DrawingRectangle了解一下由＜canvas＞提供的核心函数，该函数在页面上绘制了一个实心的蓝色矩形。图2.2显示了DrawRectangle函数在浏览器上的效果。

图2.2　DrawRectangle