在 HTML5 画布中定位文本

Question

我正在尝试将文本放在canvas元素内。在此示例中，我想将 48 像素高的文本放入 64 像素高的画布中。因此，文本应占画布高度的 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 的纵横比不同，导致您看到的压扁效果。