canvas中繪製文本

canvas提供兩種文本渲染方式：

fillText(text,x,y[,maxWidth]);	// 在指定的（x,y）處填充文本，繪製的最大寬度是可選的
strokeText(text,x,y[,maxWidth]);	// 在指定的（x,y）處繪製文本邊框，繪製的最大寬度是可選的

屬性：

font = value;	// 當前繪製文本的樣式，和使用css中font屬性相同，默認是"10px sans-serif"
textAlign = value;	// 文本對齊選項，可選值：start、end、left、right、center，默認值爲start
textBaseline = value;	// 基線對齊選項，可選值：top、hanging、middle、alphabetic、ideographic、bottom，默認值爲alphabetic
direction = value;	// 文本方向，可選值：ltr、rtl、inherit，默認值爲inherit

預測量文本寬度：

measureText();	// 將返回一個TextMetrics對象的寬度、所在的像素等體現文本特性的屬性

例如：

let cvs = document.getElementById("cvs");
let ctx = cvs.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.font = "48px serif";	
let txt = "measureText";
ctx.measureText(txt).width;

ctx.fillText(ctx.measureText(txt).width,80,100);
ctx.fillText(txt,80,130);

效果：

參考地址：

http://www.w3school.com.cn/html5/canvas_textbaseline.asp
https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API/Tutorial/Drawing_text