JavaScript动画-6

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

前言

吃饱饭才有力气写代码~

今天学习一下绘制文本~

在2D绘图上下文里还提供了绘制文本的方法：fillText()和strokeText();这俩方法都接收四个参数：将要绘制的字符串、x坐标、y坐标和可选的最大像素宽度，而且这两个方法最终绘制的结果还取决于以下三个属性：

• font: 用CSS语法指定的字体样式、大小、字体族等
• textAlign: 指定文本的对齐方式，可能的值包括"start"、"end"、"left"、"right"和"center"
• textBaseLine: 指定文本的基线，可能的值包括"top"、"hanging"、"middle"、"alphabetic"等 这些属性都有相应的默认值，所以不需要每次绘制文本时都设置它们，下面的代码在上一节的例子上绘制数字12：

//正常写法
context.font = "bold 14px Arial"
context.textAlign = "center"
context.textBaseline = "middle"
context.fillText("12",100,20)
//文字与开头对齐
context.textAlign = "start"
context.fillText("12",100,40)
//文字与末尾对齐
context.textAlign = "end"
context.fillText("12",100,60)

效果图如下：

由于绘制文本很复杂，特别是想把文本绘制到特定区域的时候，因此还有一个用于辅助确定文本大小的measureText()方法，它只接受将要绘制的文本作为参数，然后返回一个TextMetrics对象，比如想把"Hello World!"放在一个140像素宽的矩形中，代码如下：

let fontSize = 100;
context.font = fontSize + "px Arial";
while(context.measureText("Hello World!").width>140){
    fontSize--;
    context.font = fontSize + "px Arial";
}
context.fillText("Hello World!",10,10);
context.fillText("Font size is " + fontSize + "px" ,10, 50 );