内容整理承接：
《数据可视化基础 - canvas基础篇（三）：绘制弧线与圆形》
2.5 绘制文字
2.5.1 绘制上下文的文字属性（会使用就可以了）
font设置或返回文本内容的当前字体属性，使用的语法与CSS font属性相同。
例如：ctx.font = "18px '微软雅黑'";
textAlign 设置或返回文本内容的当前对齐方式
- start : 默认。文本在指定的位置开始。
- end : 文本在指定的位置结束。
- center: 文本的中心被放置在指定的位置。
- left : 文本左对齐。
- right : 文本右对齐。
- textBaseline 设置或返回在绘制文本时使用的当前文本基线
- alphabetic ： 默认。文本基线是普通的字母基线。
- top ： 文本基线是 em 方框的顶端。。
- hanging ： 文本基线是悬挂基线。
- middle ： 文本基线是 em 方框的正中。
- ideographic： 文本基线是 em 基线。
- bottom ： 文本基线是 em 方框的底端。
2.5.2 上下文绘制文字方法
ctx.fillText() 在画布上绘制“被填充的”文本
ctx.strokeText() 在画布上绘制文本（无填充）
ctx.measureText() 返回包含指定文本宽度的对象
示例：
ctx.moveTo(300, 300);
ctx.fillStyle = 'purple'; //设置填充颜色为紫色
ctx.font = '20px "微软雅黑"'; //设置字体
ctx.textBaseline = 'bottom'; //设置字体底线对齐绘制基线
ctx.textAlign = 'left'; //设置字体对齐的方式
//ctx.strokeText( "left", 450, 400 );
ctx.fillText('Top-g', 100, 300); //填充文字
