Dive Into HTML5:绘图(续二)

文本

IEFirefoxSafariChromeOperaiPhoneAndroid
7.0+*3.0+**3.0+3.0+10.0+1.0+1.0+
* IE 7.0 和 8.0 需要使用第三方 JS 库explorercanvas;IE9 原生支持。
** Mozilla Firefox 3.0 需要一定的兼容性调整

前面我们已经在画布上画出线条,下面,我们将继续添加文字。文本在一般的 web 页面上是遵循箱式模型的,但是在这里却不是。这意味着那些常见的 CSS 布局,比如 float、margin、padding 或者 wrap 这些都不能使用。(或许你觉得这是件不错的事情!)你可以设置一些字体属性,但是在 canvas 上找一个点,再把文本画出来。

下面是我们会在上下文中用到的字体属性:

  • font可以是任何你能够放在 CSS font 规则里面的东西。包括ont style、font variant、font weight、font size、line height 和 font family;
  • textAlign控制文本对齐方式。它类似 CSS 的text-align,但不完全相同。其合法值是 start、end、left、right 和 center;
  • textBaseline控制文本相对于起始点的位置。其合法值是 top、hanging、middle、alphabetic、ideographic 或者 bottom。

textBaseline可能有些难以理解。因为文本本身就是不规则的(英语会好一些,不过如果你需要绘制 Unicode 字符,就会看到这种情况了。)。HTML5 标准这样文本基线的概念

em 块的顶部与一款字体的字形顶部平齐;悬挂基线 hanging baseline 是某些字形紧贴的;中线 middle 是 em 块最顶部和最底部之间正中的位置;字母基线 alphabetic baseline 是 á、f、以及 Ω 等字母的字形紧贴的线;表意基线 ideographic baseline 是表意文字如“私”和“達”等字形紧贴的线;em 块的底部紧贴着一款字体的字形底部。边框的顶部和底部可能远离这些基线,这取决于特定字形超出 em 块的部分。

对于像英语这种字母简单的语言,将textBaseline属性指定为 top、middle 或者 bottom 就完全满足需要了。

下面,我们开始绘制文本!canvas 中的文本绘制可以从<canvas>标签本身继承字体大小和样式,当然,你也可以使用font属性重新设置。

context.font = "bold 12px sans-serif";
context.fillText("x", 248, 43);
context.fillText("y", 58, 165);

调用fillText()函数能够让我们将文本实际绘制出来。

Q: 我能够在 canvas 上使用相对字体大小吗?

A: 可以。就像页面上其他 HTML 元素,<canvas>本身也是基于页面的 CSS 规则定义字体属性的。如果你使用context.font属性设置相对字体大小,例如 1.5em 或者 150%,浏览器就可以自动使用这个值去乘以<canvas>元素从 CSS 继承来的默认字体大小。

对于位于左上角的文本,我们想让文本的顶部 y=5。但是我很懒——我不想自己测量文本高度从而计算基线值。相反,我想设置textBaseline为 top,然后将其传给文本边框的左上角坐标。

context.textBaseline = "top";
context.fillText("( 0 , 0 )", 8, 5);

下面再看看位于右下角的文本。右下角的文本坐标应该是 (492,370)——仅仅偏移右下角一点像素。同样,我也不想自己计算文本的宽度或者高度。于是,我就把textAlign设置为 right,把textBaseline设置为 bottom,然后调用fillText(),使用的是文本边框右下角的坐标值。

context.textAlign = "right";
context.textBaseline = "bottom";
context.fillText("( 500 , 375 )", 492, 370);

这就是我们最终的图像了!


糟糕!我们忘记把角落的点画出来了!在后面的内容中,我们将学习如何绘制圆点,不过现在,我们先用小方块代替吧!

context.fillRect(0, 0, 3, 3);
context.fillRect(497, 372, 3, 3);

好了!这就是我们目前得到的结果:


Leave a Reply