使用HTML canvas绘制文字

CSSfont属性相同。例如，如果我们希望我们的字体是Arial 88px bold，我们可以这样定义我们的字体：

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
ctx.font = 'bold 88px Arial';

该字符串为我们提供了字体的基本样式，但如果我们想更改颜色，我们可以重用该fillStyle属性(其工作方式与shape相同)。让我们的字体变白：

ctx.fillStyle = 'white';

现在我们已经定义了我们的字体和颜色，我们可以使用ctx.fillText()函数来填充我们的文本。ctx.fillText()具有以下语法：

ctx.fillText(textToDisplay, x, y)

textToDisplay是我们要显示的文本。

x是该文本的 x 坐标。

y是该文本的 y 坐标。

例如，我们的最终代码，假设我们想在坐标 (10,80)px 处显示文本“Hello World”，将如下所示：

let canvas = document.getElementById('canvas');
let ctx = canvas.getContext('2d');
ctx.font = 'bold 88px Arial';
ctx.fillStyle = 'white';
ctx.fillText("Hello World!", 10, 80);

这最终会产生这样的结果：