2 文字样式和对齐方式

2.1 设置文字样式

ctx.font = 'bold 40px 微软雅黑';

该属性的值同 css 中的 font 属性值相同。

2.2 设置文字对齐方式

水平对齐方式:

ctx.textAlign = 'start';  // 默认值
ctx.textAlign = 'center';
ctx.textAlign = 'end';
描述
start 默认。文本在指定的位置开始。
end 文本在指定的位置结束。
center 文本的中心被放置在指定的位置。
left 文本左对齐,
right 文本右对齐。

垂直对齐方式:

ctx.textBaseline = 'top';           // 文字顶部有线有缝隙
ctx.textBaseline = 'hanging';       // 文字顶部没有线有缝隙
ctx.textBaseline = 'middle';
ctx.textBaseline = 'bottom';         // 文字底部有线有缝隙
ctx.textBaseline = 'alphabetic';      // 默认值
描述
alphabetic 默认。文本基线是普通的字母基线。
top 文本基线是em方框的顶端。
hanging 文本基线是悬挂基线。
middle 文本基线是em方框的正中。
ideographic 文本基线是表意基线。
bottom 文本基线是em方框的底端。

results matching ""

    No results matching ""