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);
效果：

Canvas 繪製文字
filltext text，x,y maxwidth 填充文字 stroketext text，x,y maxwidth 描邊文字 font font 10px sans serif 預設 text anchor start 預設，文字對齊界線開始的地方 左對齊指本地從左向右，右對齊指本地從右向左 ...
canvas繪製文字
屬性和方法 font value 設定字型 textalign value 設定字型對齊方式 start,end,left,right,center textbaseline value 設定基線對齊方式 top,hanging,middle,alphabetic,ideographic,botto...
canvas繪製文字
canvas 提供了兩種方法來渲染文字 filltext text,x,y 在指定的 x,y 位置填充指定的文字 stroketext text,x,y 在指定的 x,y 位置繪製文字邊框 示例 ctx.filltext 無悟飯空 100,100 ctx.stroketext 無悟飯空 100,10...