前端基础_绘制文字

绘制文字

在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方法绘制文字