canvas基础入门系列教程(7)-绘制文本

5.绘制文本

5.1.strokeText方法

通过strokeText方法可以绘制描边的文本

// 语法
ctx.strokeText(text, x, y [, maxWidth]);

参数说明

text 使用当前 font，textAlign，textBaseline和direction 的值对文本进行渲染。
x 文本起始点的 x 轴坐标。
y 文本起始点的 y 轴坐标。
maxWidth 可选,需要绘制的最大宽度。如果指定了值，并且经过计算字符串的宽度比最大宽度还要宽，字体为了适应会使用一个水平缩小的字体（如果通过水平缩放当前的字体，可以进行有效的或者合理可读的处理）或者小号的字体

实例：

var oCanvas = document.getElementById('cvs')
var ctx = oCanvas.getContext('2d')
// 定义字体属性
ctx.font = "bold 80px 微软雅黑"
ctx.strokeText('螺钉课堂', 100, 100)

5.2.fillText方法

和strokeText类似，fillText可以绘制填充文本

// 语法
ctx.fillText(text, x, y [, maxWidth])

参数和strokeText一样

实例：

var oCanvas = document.getElementById('cvs')
var ctx = oCanvas.getContext('2d')
// 定义字体属性
ctx.font = "bold 80px 微软雅黑"
ctx.fillText('螺钉课堂', 100, 100)

5.3.measureText方法

方法返回一个 TextMetrics 对象，包含关于文本尺寸的信息（例如文本的宽度）,配合这个方法使文本居中比较方便

ctx.measureText(text)

参数和返回值说明

参数：
text 需要测量的文本。
返回值：
TextMetrics 对象

实例：

var oCanvas = document.getElementById('cvs')
var ctx = oCanvas.getContext('2d')
var text = '螺钉课堂'
// 定义字体属性
ctx.font = "bold 80px 微软雅黑"
var position =  oCanvas.width / 2 - ctx.measureText(text).width / 2
ctx.strokeText(text, position, 100)

5.4.文本相关属性

1.font属性

font属性和css中的用法一样

// 语法
ctx.font = "font-style font-weight font-size/font-height font-family"

2.textAlign属性

textAlign用来设置水平方向的对齐方式

ctx.textAlign = '属性值'
这里的属性值可以为：
start  开始位置，指定坐标
end    结束位置，指定坐标
left   左对齐
right  右对齐
center 居中对齐

3.textBaseLine属性

textBaseLine用来设置垂直方向的对齐方式

// 语法
ctx.textBaseline = '属性值'
属性值有：
top 文本基线在文本块的顶部。
middle 文本基线在文本块的中间。
bottom 文本基线在文本块的底部。 与 ideographic 基线的区别在于 ideographic 基线不需要考虑下行字母。
alphabetic 文本基线是标准的字母基线。