Dive Into HTML5:绘图

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

Leave a Reply