绘制简单文字效果《HTML5系列教程22》

文字内容在网页是必不可少的重要内容，我们可以在HTML中直接输入文字，也可以通过Canvas设置文字的字体、大小和样式，在网页中呈现并绘制简单文字效果。这次我们主要介绍在HTML5中利用Canvas如何控制文本的字体大小、颜色、描边、对齐等方法。

如何控制文本的字体、大小和样式

Canvas提供了设置文字字体、大小和样式的函数，这个函数就是font，此函数可以有5个参数，依次代表文字的字体样式、字体变体、字体粗细、字体大小和字体系列，下图就是font函数的应用代码示例

font函数的详细描述参照下图表

设置了文字的字体、大小和样式后，最好通过fillText函数完成文字的绘制。通过Canvas绘制文字的代码如图：

在谷歌浏览器中预览的效果：

如何控制文本的颜色

Canvas中有两种方法可用于改变文本的颜色，一种是通过fillstyle函数设置文本的填充颜色，另一种是通过createLinearGradient函数为文本填充渐变色。控制文本颜色的代码如下：

在谷歌浏览器中预览的效果：

描绘文本的边缘

要描绘字体的边缘效果，需要使用stroKeText函数替代fillText函数，同时要用stroKeStyle属性替代fillStyle属性。描绘文本边缘的代码如图：

在谷歌浏览器中预览的效果：

文本对齐方式设置

Canvas中文本的对齐功能使用textAlign属性进行控制，可供选择的选项包括start、end、left、center和right。对齐的位置是相对于一条虚拟的垂直线，这条线是由fillText()或strokeText()定义的文本X位置。默认情况下，textAlign属性被设置成start。

文本被左对齐的情况包括：

textAlign属性被设为left时；

textAlign属性被设为start，且文档方向是ltr(left to right)时；

textAlign属性被设为end，且文档方向是rtl(right to left)时；

文本被右对齐的情况包括：

textAlign属性被设为right时；

textAlign属性被设为start，且文档方向是ltr(left to right)时；

textAlign属性被设为end，且文档方向是rtl(right to left)时；

文本对齐的设置代码如图：

在谷歌浏览器中预览的效果：

在HTML5中绘制简单的文字效果还是挺简单的，个人而言也比较好玩。希望大家有时间多练习练习代码，试着自己改变参数来实现不同的效果。谢谢大家的观看！祝大家:身体健康、生活愉快！