Canvas - 文字篇

文字的需求对 canvas 相对较小，但有时候还是用的到，这边简短介绍一下

文本样式

基本上设定方法与 css 大同小异

font

使用方法同 css 的 font 属性，预设为 10px sans-serif

textAlign

设定 X 轴的对齐方式，共有四个值供使用，预设为 start

start: 若文本排序是左到右，则同 leftend: 若文本排序是左到右，则同 rightleft: 靠右对齐right: 靠左对齐center: 置中对齐

textBaseline

基準线对齐方式，共有六个值供使用，预设为 alphabetic

alphabetic: 对齐字母基準线top: 对齐顶端bottom: 对齐底部middle: 对齐中间hanging: 悬挂文本，与top类似，由藏文和印度语使用ideographic: 表意基準线，与bottom类似，由中文、日文和韩文使用

direction

文字排序方向性，预设为 inherit

inherit: 继承父元素ltr: 左到右rtl: 右到左

文本绘製

文本绘製分为实心与空心，使用上相当容易

实心文本

maxWidth 为选填

ctx.fillText(text, x, y , maxWidth);

// 範例ctx.font = '48px serif';ctx.fillText('Hello world', 10, 50);

範例文字

空心文本

maxWidth 为选填

ctx.strokeText(text, x, y , maxWidth);

// 範例ctx.font = '48px serif';ctx.fillText('Hello world', 10, 50);

範例文字

文本宽度

若需测量文本宽度，canvas 有提供一个方法测量

ctx.measureText(text);// 範例var text = ctx.measureText('text');console.log(text.width); // 16.1181640625