canvas'尺寸一次无法正确显示

Question

作为前端初学者，我才刚刚开始学习canvas。我正在尝试绘制一些文字。但是 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>

结果是：enter image description here

如您所见，消息不能完全显示，但是当我再次点击运行功能draw()按钮时，canvas可以完全显示: enter image description here

谁能告诉我为什么会这样。

Answer 1

您需要做几件事：

设置字体后调用measureText，否则宽度不正确
更改 canvas 尺寸后，您需要重置字体

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

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>

canvas'尺寸一次无法正确显示

canvas' size could not display correctly at once

html

canvas

html5-canvas