12.5 HTML Canvas绘制文本

Canvas不仅能绘制图形,还能够显示文本

Canvas不仅能绘制图形,还能够显示文本。与使用传统的HTML元素(如p元素)创建文本相比,使用Canvas绘制文本通常并不是好方法,原因如下:

Canvas中的文本是以图像形式绘制的,这意味着它无法像HTML文档中的普通文字一样用鼠标指针选取——它实际上不是文本,只是像文本而已。一旦文字绘制之后,它就无法编辑,除非先擦除文字,再重新绘制。在Canvas中绘制文本的好处是你可以利用Canvas支持的强大转换和其他绘图功能。然而,除非你有充分理由不使用普通的HTML元素,否则一定不要在Canvas中创建文本。相反,你应该使用普通的HTML元素来创建文本,然后使用css定位到Canvas之上。关键是使用HTML来处理文本(内容),而使用Canvas来处理像素和图形。

Canvas绘制文本的方法其实很简单:

 var text = "Hello, World!";
    context.fillText(text, 40, 40); 

这就是绘制文本所需要的代码。2D渲染上下文的fillText方法可按受4个参数(其中一个是可选的,所以我们现在省略了)。第一个参数是准备绘制的文本,第二个和第三个参数是文本原点(左下角)的(x,y)坐标值。

由于字号太小无法看清楚,这是因为Canvas的默认文本设置是10px sans-serif(非常小)。所以现在修改字号,同时也会介绍修改字体的方法。要实现这个操作,你需要设置2D渲染上下文的font属性,如下所示:

 var text = "Hello, World!"; 
    context.font = "30px serif"; // Change the size and font 
    context.fillText(text, 40, 40); 

属性font可接受与css的font属性完全相同的字符串值。在前一个例子中,我们指定了字体的像素大小,然后是希望使用的字体。设置为serif表示计算机的默认字体是serif字体(与Times New Roman类似)。所有代码组合在一起将得到如图1所示的结果。

绘制文本和修改字号

这样显示效果会好—些,能看清了。如果愿意,甚至可以将文本设置为斜体:

var text = "Hello, World!"; 
    context.font = "italic 30px serif"; 
    context.fillText(text, 40, 40); 

这里所做的唯—修改就是将单词italic添加到font属性中,这样就得到如图2所示的结果。

绘制斜体文本

奇怪,在Firefox中显示不出斜体,而在IE9.0中斜体显示正常。

除了font属性,还可以使用许多设置,如行高和备用字体系列。如果你对在Canvas中使用文本感兴趣,建议你自己学习。

下面介绍如何创建描边文本——这也是很有用的:

var text = "Hello, World!"; 
    context.font = "italic 60px serif"; 
    context.strokeText(text, 40, 100); 

这次使用的是strokeText方法,它的参数与fillText完全相同。字号过小会让文本难以辨别,所以在这个例子中,我们加大了字号,而原点也稍微向下移,所以文本不会超出屏幕顶部。最终得到的结果如图3所示。

绘制描边文本

我们并不常用描边文本,但是它在一些项目中是必不可少的。如果遇到这种情况,建议你尽量使用这个功能。