前端基础_绘制文字

绘制文字

在HTML5中，可以在canvas画布中进行文字的绘制，也可以指定绘制文字的字体、大小、对齐方式等，还可以进行文字的纹理填充等，

绘制文字时可以使用fillText方法或strokeText方法。

fillText方法用填充方式绘制字符串，该方法的定义如下。

void fillText(text,x,y,[maxWidth]);

该方法接受4个参数，第一个参数text表示要绘制的文字，第二个参数x表示绘制文字的起点横坐标，第三个参数y表示绘制文字的起点纵坐标，第四个参数maxWidth为可选参数，表示显示文字时的最大宽度，可以防止文字溢出。

strokeText方法用轮廓方式绘制字符串，该方法的定义如下。

void stroke text(text,x,y,[maxWidth]);

该方法参数功能与fillText方法相同。

在使用Canvas API来进行文字的绘制之前，先对该对象的有关文字绘制的属性进行设置，主要有如下几个属性。

　font属性：设置文字字体。

　textAlign属性：设置文字水平对齐方式，属性值可以为start、end、left、right、center。默认值为start。

　textBaseline属性：设置文字垂直对齐方式，属性值可以为top、hanging、middle、alphabetic、ideographic、bottom。默认值为alphabetic。

【例17.27】下面应用fillText方法和strokeText方法来绘制一句欢迎语，通过对比看一下两种方法设置字体样式的区别。

本例运行的效果如图17.43所示。

图17.43　应用fillText方法和strokeText方法绘制文字

实现的代码如下。

在使用CSS样式的时候，有时我们会希望能在文字周围制作一个漂亮的边框，在定义边框宽度时，我们首先需要计算出在这个边框中最长一行的文字的宽度。这时，我们可以使用图形上下文对象的measureText方法来得到文字的宽度，该方法的定义如下。

metrics=context.measureText(text);

measureText方法接受一个参数text，该参数为需要绘制的文字，该方法返回一个TextMetrics对象，TextMetrics对象的width属性表示使用当前指定的字体后text参数中指定的文字的总文字宽度。

https://www.bilibili.com/video/BV1kR4y167Cp/?spm_id_from=333.999.0.0&vd_source=a7816e3b2a3a67ac39dc87f6bf92421chttps://www.bilibili.com/video/BV1kR4y167Cp/?spm_id_from=333.999.0.0&vd_source=a7816e3b2a3a67ac39dc87f6bf92421c