绘制文本
绘制文本
画布渲染上下文提供两种方法来渲染文本
fillText(text, x, y [, maxWidth])-
使用当前
fillStyle填充给定位置 (x,y) 的文本。可选地指定最大宽度进行绘制。 strokeText(text, x, y [, maxWidth])-
使用当前
strokeStyle描绘给定位置 (x,y) 的文本。可选地指定最大宽度进行绘制。
一个 fillText 示例
文本使用当前 fillStyle 进行填充。
js
function draw() {
const ctx = document.getElementById("canvas").getContext("2d");
ctx.font = "48px serif";
ctx.fillText("Hello world", 10, 50);
}
一个 strokeText 示例
文本使用当前 strokeStyle 进行填充。
js
function draw() {
const ctx = document.getElementById("canvas").getContext("2d");
ctx.font = "48px serif";
ctx.strokeText("Hello world", 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，这些属性可能对你来说很熟悉。
来自 WHATWG 的以下图表演示了 textBaseline 属性支持的各种基线。 
一个 textBaseline 示例
编辑下面的代码，并在画布中实时查看更改的更新
高级文本测量
如果需要获取有关文本的更多详细信息，可以使用以下方法进行测量。
measureText()-
返回一个
TextMetrics对象，其中包含指定文本在当前文本样式下绘制时的宽度（以像素为单位）。
以下代码片段显示了如何测量文本并获取其宽度。
js
function draw() {
const ctx = document.getElementById("canvas").getContext("2d");
const text = ctx.measureText("foo"); // TextMetrics object
text.width; // 16;
}