canvas(五)绘制文本

1.绘制描边文本

ctx.strokeText(str,x0,y0)
参数一：需要绘制的文本
参数二三：文本绘制的基点（文字默认在基点的右上方）
它有自己的独立路径

ctx.strokeStyle：设置文本颜色
ctx.font：设置文本,语法与 CSS font 属性相同。详见https://www.runoob.com/cssref/pr-font-font.html

注意：即使拥有独立路径，依然会继承前面代码设置的绘制样式，包括描边颜色，虚线

2.修改文本对齐方式（水平方向）

文本默认在基点的右上方，也就是左对齐，可以通过相关API来修改文本对齐方式。
ctx.textAlign设置文本的对齐方式，他有以下几个值：
left：默认，左对齐，原点位于文字的左下角
center：居中对齐，原点位于文字的中下方
right：右对齐，原点位于文字的右下角

注意：这个属性会被后面的代码继承

3.修改文本基线

文本之所以默认在基点的上方，就是由文本基线决定的。
通过ctx.textBaseline可以修改文本的基线，方法与css的vertical-align类似，他有以下几个值：
middle：文本垂直方向上居中对齐
top：文本顶对齐
bottom：文本底对齐
baseline：默认

4.绘制填充文本（实心文字）

ctx.fillText(str,x,y,maxWidth)
参数一：需要 绘制的文本
参数二三：绘制基点
参数四：可选，文本的最大宽度（如果文本的实际宽度大于这个限制，所有的文本会被压扁）

5.获取文本的宽度

ctx.measureText(str)返回一个文本测量结果的对象，其中的width属性描述的就是文本的宽度。

文本宽度与字符个数还有字体大小有关，例如：

可以看出，字体大小越大，相应的文本宽度也就越大。汉字比较有意思，他的字体大小刚好等于一个汉字的大小，6个汉字供占据 40 * 6 = 240，将字体大小修改成20px后，占位6 * 20 = 120

实例：为文本添加一条长度相等的下划线