HTML5_canvas_填充文本，描邊文本

canvas 文本相關

• 填充文本

pen.fillText("HelloWorld", 100, 100);        文本的(100, 100) 在文本基線處

 

• 文本樣式

pen.font = "blod 40px 微軟雅黑";

 

• 描邊文本

pen.strokeText("哈哈", 200, 200);

 

• 水平對齊方式

pen.textAlign = "start";    默認值

pen.textAlign = "end"; 

pen.textAlign = "center";

 

• 垂直對齊方式

pen.textBaseline = "top";    基線在文字之下，有縫隙

pen.textBaseline = "hanging";    基線在文字之下，無縫隙

pen.textBaseline = "middle";    文字被基線穿過，基線偏上

pen.textBaseline = "bottom";    基線在文字之下，

pen.textBaseline = "alphabetic";    默認值

 

• 文本水平垂直居中（600*600的畫布）
• pen.textAlign = 'center';
• pen.textBaseline = "middle";

 

• 陰影（能夠有多個陰影；既能夠是文字陰影，也能夠是繪畫文本）

pen.shadowOffsetX = 20;

pen.shadowOffsetY = 20;

pen.shadowBlur = 5;

pen.shadowColor = 'red';