画布尺寸无法一次正确显示。

Question

作为前端初学者，我刚开始学习canvas。我试图绘制一些文本。但是画布的尺寸一开始无法正确显示：

我用下面的代码创建了canvas：

const message = input.value;
let ctx = canvas.getContext('2d')
let metrics = ctx.measureText(message);
let textWidth = metrics.width*2;
canvas.width = textWidth;
canvas.height = 200;
ctx.font = "normal 30px Verdana";
ctx.fillStyle = "#000000";
ctx.fillText(message, 30, 200);

<input id=input value="init message" />
<canvas id=canvas></canvas>

结果如下：在此输入图像描述

正如您所看到的，消息无法完全显示，但当我单击按钮再次运行draw()函数时，画布就可以完全显示：

在此输入图像描述

请问有人能告诉我为什么会出现这种情况吗？

- AMORE

---

画布的默认大小为300x150。如果您第一张图像中的画布是这么大，那么在绘制之前您还没有设置它的大小。使用CSS样式来给它加上边框可能是一个有用的调试快捷方式。 - enhzflep

Answer 1

你需要做几件事：

• 在设置字体后调用measureText，否则宽度将不正确
• 更改画布尺寸后，需要重新设置字体

在你的代码中，你需要两次设置字体。
第一次是在测量之前，第二次是在更改画布宽度和高度之后；我在示例中添加了一个console.log，你可以看到在画布更改尺寸后，字体会变为默认值； 下面是一个工作示例：

const message = "Hello World"
const font = "normal 30px Verdana"

let canvas = document.getElementById("c");
let ctx = canvas.getContext('2d');

ctx.font = font;
let metrics = ctx.measureText(message);
canvas.width = metrics.width * 2;
canvas.height = 100;
console.log(ctx.font)

ctx.font = font;
ctx.fillText(message, 30, 90);

canvas {
  border: 2px solid #0000AA
}

<canvas id="c"></canvas>

- Helder Sepulveda