12.5 HTML Canvas绘制文本

优质

小牛编辑

135浏览

2023-12-01

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所示。

绘制描边文本

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

$(document).ready(function () { var canvas1 = $("#canvas1"); var context1 = canvas1.get(0).getContext("2d"); var text = "Hello, World!"; context1.font = "30px serif"; // Change the size and font context1.fillText(text, 40, 40); var canvas2 = $("#canvas2"); var context2 = canvas2.get(0).getContext("2d"); var text = "Hello, World!"; context2.font = "italic 30px serif"; context2.fillText(text, 40, 40); var canvas3 = $("#canvas3"); var context3 = canvas3.get(0).getContext("2d"); var text = "Hello, World!"; context3.font = "italic 60px serif"; context3.strokeText(text, 40, 100); });