Canvas学习:绘制文本

特别声明:小站已开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

前面的课程我们学习的都是如何在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'
剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/canvas/drawing-text.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部