绘制文本
在前一个章节中看过如何应用样式和颜色之后，我们现在来看一下如何在画布（canvas）中绘制文本。
绘制文本
画布渲染上下文提供了两种渲染文本的方法：
fillText(text, x, y [, maxWidth])-
在指定的 (x,y) 位置填充指定的文本。绘制的最大宽度是可选的。
strokeText(text, x, y [, maxWidth])-
在指定的 (x,y) 位置绘制文本边框。绘制的最大宽度是可选的。
fillText 示例
文本用当前的填充样式（fillStyle）被填充：
js
function draw() {
const ctx = document.getElementById("canvas").getContext("2d");
ctx.font = "48px serif";
ctx.fillText("你好世界", 10, 50);
}
strokeText 示例
文本用当前的边框样式（strokeStyle）被填充：
js
function draw() {
const ctx = document.getElementById("canvas").getContext("2d");
ctx.font = "48px serif";
ctx.strokeText("你好世界", 10, 50);
}
为文本添加样式
在上面的示例用我们已经使用了 font 属性来使文本比默认尺寸大一些。还有更多的属性可以让你改变画布显示文本的方式：
font = value-
当前我们用来绘制文本的文本样式。这个字符串使用和 CSS
font属性相同的语法。默认的字体是10px sans-serif。 textAlign = value-
文本对齐选项。可选的值包括：
start、end、left、right或center。默认值是start。 textBaseline = value-
基线对齐选项。可选的值包括：
top、hanging、middle、alphabetic、ideographic、bottom。默认值是alphabetic。 direction = value-
文本方向。可能的值包括：
ltr、rtl、inherit。默认值是inherit。
如果你之前使用过 CSS，那么你会很熟悉这些属性。
下面来自 HTML 规范的图展示了 textBaseline 属性支持的不同的基线情况。
textBaseline 示例
此示例演示了不同的 textBaseline 属性值。请参见 CanvasRenderingContext2D.textBaseline 页面以了解更多信息和详细示例。
js
function draw() {
const ctx = document.getElementById("canvas").getContext("2d");
ctx.font = "48px serif";
ctx.textBaseline = "hanging";
ctx.strokeText("hanging", 10, 50);
ctx.textBaseline = "middle";
ctx.strokeText("middle", 250, 50);
ctx.beginPath();
ctx.moveTo(10, 50);
ctx.lineTo(300, 50);
ctx.stroke();
}
预测量文本宽度
当你需要获得更多的文本细节时，下面的方法可以给你测量文本的方法。
measureText()-
返回一个包含以当前文本样式绘制指定文本时，其所具有的宽度（以像素为单位）的
TextMetrics对象。
下面的代码片段将展示如何测量文本来获得它的宽度：
js
function draw() {
const ctx = document.getElementById("canvas").getContext("2d");
const text = ctx.measureText("foo"); // TextMetrics 对象
text.width; // 16;
}