> 脚本语言 > >

Canvas学习：绘制文本 2017-04-21 09:23　出处：清屏网　人气：　

前面的课程我们学习的都是如何在Canvas中绘制图形，但很多时候，除了绘制图形之外还有很多情景要同文本打交道。不过在Canvas中到目前为止只提供了一些必备的基本功能，例如文本的描边与填充，向Canvas之中放置文本，以及用像素为单位来计算任意字符串的宽度等。接下来的内容，我们就来了解在Canvas中怎么绘制文本以及一些基本的操作。

Canvas的绘图环境对象提供了两种方法来渲染文本：

fillText(text, x, y, [maxWidth]) ：绘制填充文本

strokeText(text, x, y, [maxWidth]) ：绘制描边文本

在Canvas中同样提供了类似CSS的一些 font 属性，用来修饰在Canvas中绘制的文本，比如:

font = value ：用来修饰绘制文本的样式，类似于CSS中的 font

textAlign = value ：文本对齐设置

textBaseline = value ： 文本基线对齐设置

direction = value ： 文本方向的设置

除此之外，很多时候我们还需要对已绘制文本宽度的度量，在Canvas中提供了一个 measureText(text) 方法，该方法所返回的对象中，包含一个名为 width 的属性，它的值代表你传递给该方法的文本所占据的宽度。

在接下来的内容，我们将详细的针对上述内容做相关的阐述。

文本的填充和描边

在Canvas中的 CanvasRenderingContext2D 对象提供了两个方法来绘制文本： fillText() 和 strokeText() 方法。先来看 fillText() 方法。

fillText() 方法用来绘制填充文本，其语法如下：

ctx.fillText(text, x, y, [maxWidth])

fillText() 方法接受四个参数：

text ：需要绘制的文本内容

x ：指定绘制文本在Canvas画布中起始位置的 x 轴坐标点

y ：指定绘制文本在Canvas画布中起始位置的 y 轴坐标点

maxWidth ：指定绘制文本的最大宽度

来看个简单的示例：

var text = 'Hello! W3cplus.com !'; // 需要绘制的文本内容 ctx.fillStyle = '#f90'; // 文本颜色 ctx.textAlign = 'center'; // 文本对齐方式 ctx.font = '48px Airal'; // 文本字号、字体 ctx.fillText(text, w / 2, h / 2);

效果如下：

可以 点击这里 在CodePen上查看Demo效果 。

在绘制文本时，同样可以使用 fillStyle 属性来设置填充文本的颜色。另外，上面的示例，我们只用了其中三个参数，并没有使用 maxWidth 参数。在 fillText() 方法中，这个参数是可选参数。这个参数的主要功能是用来控制绘制文本的最大宽度。如果绘制的文本内容超过了 maxWidth 的宽度的时候，将会压缩文本，让绘制的文本宽度和 maxWidth 值一样。

来个小示例：

var text = 'Hello! W3cplus.com !'; ctx.fillStyle = '#f90'; ctx.textAlign = 'center'; ctx.font = '48px Airal'; ctx.fillText(text, w / 2, h / 2 - 50, 200); ctx.fillText(text, w / 2, h / 2 + 50);

效果如下：

可以 点击这里 在CodePen上查看Demo效果 。

上示中，绘制的第一个文本，设置了 maxWidth ，而第二个文本并未设置 maxWidth 。通过 ctx.measureText(text).width) 可以得出未设置 maxWidth 的值是 474 ，也就是说文本 Hello! W3cplus.com! 从 474 压缩到了 200 。

上面介绍的是 fillText() 绘制填充文本，在Canvas中还可以通过 strokeText() 方法来绘制描边文本。该方法具有的参数和使用方法与 fillText() 一样，只是最终在Canvas中渲染的效果不一样。比如将上示中的 fillText() 换成 strokeText() ，同时将 fillStyle 换成 strokeStyle ：

var text = 'Hello! W3cplus.com !'; ctx.strokeStyle = '#f90'; ctx.textAlign = 'center'; ctx.font = '48px Airal'; ctx.strokeText(text, w / 2, h / 2 - 50, 200); ctx.strokeText(text, w / 2, h / 2 + 50);

最终效果如下：

可以 点击这里 在CodePen上查看Demo效果 。

在实际中，我们可以同时使用 fillText() 和 strokeText() 方法绘制一个具有填充的边框的文本，这也是我们最常见的描边文本，但它们的起始位置应该在同一个点：

var text = 'Hello! W3cplus.com !'; ctx.strokeStyle = 'blue'; ctx.fillStyle = 'red'; ctx.lineWidth = 2; ctx.textAlign = 'center'; ctx.font = '48px Airal'; ctx.fillText(text, w / 2, h / 2); ctx.strokeText(text, w / 2, h / 2);

最终效果如下：

可以 点击这里 在CodePen上查看Demo效果 。

为了便于更灵活的使用 fillText() 和 strokeText() 绘制文本，可以将其封装成一个函数，比如 drawText() ：

// @param {Object} ctx - CanvasRenderingContext2D // @param {String} text - 绘制文本的内容 // @param {Number} x - 绘制文本起始点x轴坐标 // @param {Number} y - 绘制文本起始点y轴坐标 // @param {Boolean} isFill - 是否填充，true绘制填充文本，false绘制描边文本 // @param {Boolean} isMaxWidth - 是否设置文本最大宽度, true设置最大宽度， false不设置最大宽度 // @param {String} color - 绘制文本颜色 // @param {Number} maxWidth - 文本最大宽度 function drawText(ctx, text, x, y, isFill, isMaxWidth, color, maxWidth) { if (isFill) { ctx.fillStyle = color; if (isMaxWidth) { ctx.fillText(text, x, y, maxWidth); } else { ctx.fillText(text, x, y); } } else { ctx.strokeStyle = color; if (isMaxWidth) { ctx.strokeText(text, x, y, maxWidth); } else { ctx.strokeText(text, x, y); } } }