特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)
前面的课程我们学习的都是如何在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'
如需转载,烦请注明出处:https://www.w3cplus.com/canvas/drawing-text.html
如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!