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';