使用ctx.fillText在Canvas中绘制文字

在Canvas中使用ctx.fillText方法绘制文本时，我们也可以通过指定字体大小来控制文本的大小。

使用语法

ctx.font = "字体大小 字体样式 字体系列";
ctx.fillText(text, x, y);

其中，字体大小是以像素表示的数字，字体样式和字体系列都是可选的参数。

示例代码

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");

ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);

上述代码使用30像素大小的Arial字体在Canvas中绘制了一个"Hello World"的文本。

注意事项

• 字体大小必须是数字并且以像素为单位。
• 如果未指定字体样式或字体系列，则会使用默认值。
• 如果要改变字体样式或字体系列，请在字体大小之后用空格隔开。

结论

通过使用ctx.fillText方法并指定字体大小，我们可以在Canvas中轻松地控制绘制文本的大小。