canvas（2D绘图上下文绘制文本）

1、2D绘图上下文提供了绘制文本的方法。绘制文本主要有两个方法：fillText（）和strokeText（）。这两个方法都可以接收4个参数：要绘制的文本字符串、x坐标、y坐标和可选的最大像素宽度。而且，这两个方法都以下列3个属性为基础。

＊ font：表示文本样式、大小及字体，用CSS中指定字体的格式来指定，例如“10px Arial”。

＊ textAlign：表示文本对齐方式。可能的值有“start”、“end”、“left”、“right”和“center”。建议使用“start”和“end”，不要使用“left”和“right”，因为前两者的意思更稳妥，能同时适合从左到右和从右到左显示（阅读）的语言。

＊ textBaseline：表示文本的基线。可能的值有“top”、“hanging”、“middle”、“alphabetic”、“ideographic”和“bottom”。

这几个属性都有默认值，因此没有必要每次使用它们都重新设置一遍值。fillText（）方法使用fillStyle属性绘制文本，而strokeText（）方法使用strokeStyle属性为文本描边。相对来说，还是使用fillText（）的时候更多，因为该方法模仿了在网页中正常显示文本。

2、由于绘制文本比较复杂，特别是需要把文本控制在某一区域中的时候，2D上下文提供了辅助确定文本大小的方法measureText（）。这个方法接收一个参数，即要绘制的文本；返回一个TextMetrics对象。返回的对象目前只有一个width属性，但将来还会增加更多度量属性。

measureText（）方法利用font、textAlign和textBaseline的当前值计算指定文本的大小。

3、前面提到过，fillText（）和strokeText（）方法都可以接收第四个参数，也就是文本的最大像素宽度。提供这个参数后，调用fillText（）或strokeText（）时如果传入的字符串大于最大宽度，则绘制的文本字符的高度正确，但宽度会收缩以适应最大宽度。

转载于:https://www.cnblogs.com/honey920/p/5309081.html