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