首页 > 技术文章 > HTML5_canvas_填充文本,描边文本

tianxiaxuange 2018-11-21 15:02 原文

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

 

推荐阅读