在 HTML5 画布中定位文本

Question

我正在尝试将文本放在canvas元素中。在此示例中，我想将 48px 高的文本放在 64px 高的画布内。因此，文本应占画布高度的 3/4。但是，在我尝试过的所有内容中，文本仅占据画布的上部，并且我做得越大，文本就会被挤压到该空间中。

如果我从 0， 0 开始;画布中什么都没有显示，所以我移动到 0， 64 开始。这会将文本放在里面，但如前所述缩放是关闭的。如果我一直到 0， 128 - 这对我来说甚至没有意义 - 文本被移动到画布的底部，但仍然被压扁。这里肯定有一些我不明白的地方。如何在画布中获取我指定的高度的文本？

let canvas = document.getElementById("cv");
let ctx = canvas.getContext("2d");
ctx.font = "48px Arial";
ctx.fillText("Hello World", 0, 64);

<canvas id="cv" style="border: 1px solid black; height: 64px; width: 300px;"></canvas>

Answer 1

您没有为画布提供初始大小，您需要传入大小属性(CSS 大小实际上是不同的，您可以在屏幕上以 10 像素宽显示 1000 像素宽的画布(

只需向画布元素添加width="300" height="64"

let canvas = document.getElementById("cv");
let ctx = canvas.getContext("2d");
ctx.font = "48px Arial";
ctx.fillText("Hello World", 0, 48);

<canvas 
id="cv"
style="border: 1px solid black; height: 64px; width: 300px;"
width="300"
height="64"
></canvas>

澄清一下，您的文本实际上被正确写入画布，但您的画布与显示它的 CSS 的纵横比不同，从而导致您看到的挤压效果。