Canvas 绘制文本注意事项

我在这里这几章节教程的时候，思考了很多点，也遇到了很多问题

1. 为什么没有测量文本高度的方法

当我整理完 Canvas 预测文本宽度 measureText 的时候，我就在思考这个问题

直到在章节末尾，我自己画了一个按钮，我才知道，其实不用给测量文本高度的方法

还记得 Canvas 文字垂直对齐 textBaseline 章节中的 七线六格 图吗，其实我们设定的文字大小就是一行文本的高度

如果有多行文本呢？这就涉及到另一个非常有意思的问题

2. 绘制文本时的换行符不起作用？

不管用哪个方法，当文本内容超过一定的宽度的时候，要么不显示，要么字体变小缩放显示(第四个参数)

不信你看看这个范例

<!DOCTYPE html>
<meta charset="utf-8"> 
<canvas id="canvas-1" width="500" height="100">
</canvas>

<script>
var c   = document.getElementById("canvas-1");
var ctx = c.getContext("2d");
ctx.font = "22px Microsoft YaHei";

ctx.fillText("简\n单\r教\r\n程",50,50);
ctx.fillText("简\n单\r教\r\n程",50,100,30);
</script>

运行结果如下

看到没有？ \r\n 带来的效果只是一个简单的空格

而且当我们设置了文本宽度的时候，如果内容超出大小，还会自己缩放

我翻遍了全部的 API，没有一个方法用来绘制多段文本

1. 为什么没有测量文本高度的方法

2. 绘制文本时的换行符不起作用 ？

Canvas 基础教程

2. 绘制文本时的换行符不起作用？