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方框的底端。 |