绘图文本

canvas不仅仅局限于形状和图像。也可以在canvas上绘制文本。要在canvas上绘制文本,请获取对canvas的引用,然后在上下文中调用fillText方法或者strokeText方法。

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
ctx.font = '48px serif';
ctx.fillText("canvas文本", 50, 50);

传递到fillText中的三个必选参数是:

  1. 要显示的文本
  2. 水平(x轴)位置
  3. 垂直(y轴)位置

此外,还有第四个可选参数,您可以使用它来指定文本的最大宽度(以像素为单位)。在下面的示例中,值200将文本的最大宽度限制为200px:

ctx.fillText("canvas文本", 50, 50,200);

效果:

canvas文本

也可以使用strokeText方法绘制不带填充的文本,而只绘制轮廓:

ctx.strokeText("stroke text", 50, 50);

效果:

strokeText

在不应用任何字体格式属性的情况下,默认情况下,canvas以10像素大小的无衬线呈现文本。上面的示例设置了字体和大小,ctx.font = '48px serif'

measureText()获取TextMetrics对象

有时候我们在使用Canvas绘制一段文本时,会需要通过measureText()方法获取文本的宽度。

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var text = ctx.measureText('canvas'); // TextMetrics object
consolo.log(text.width); // 文本宽度;

measureText返回的其实是一个TextMetrics对象,它包含了文本的宽度。

文本相关属性

除了前面的font属性设置,还有以下3个属性设置。

ctx.textAlign用于设置水平对齐方式,ctx.textAlign = "left" || "right" || "center" || "start" || "end";

ctx.textBaseline用于设置垂直对齐方式,ctx.textBaseline = "top" || "hanging" || "middle" || "alphabetic" || "ideographic" || "bottom"

ctx.direction当前文本绘制的方向,ctx.direction = "ltr" || "rtl" || "inherit";

这3个属性去熟悉它的最好方式是去实际画图试一试,试一试各个取值会产生什么效果,自然就会明白。

渝ICP备20006974号-2