javascript - 在 HTML5 Canvas 中定位文本

Question

我试图将文本放在 canvas 元素中。在此示例中，我想将 48px 高的文本放在 64px 高的 Canvas 中。因此，文本应占据 Canvas 高度的 3/4。然而，在我尝试过的所有方法中，文本只占据 Canvas 的上部，并且我做得越大，它就会被挤压到那个空间里。

如果我从0开始，0； Canvas 上什么也没有出现，所以我移动到 0、64 开始。这会将文本放在里面，但如前所述，缩放比例已关闭。如果我一直走到 0、128 - 这对我来说甚至没有意义 - 文本将移动到 Canvas 的底部但仍然被压扁。这里肯定有一些我不明白的定位。如何在 Canvas 中获取指定高度的文本？

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

你没有给你的 Canvas 一个初始大小，你需要传入大小属性(CSS 大小实际上是不同的，你可以在屏幕上以 10 像素宽显示 1000 像素宽的 Canvas )

只需在 Canvas 元素中添加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>

澄清一下，您的文本实际上已正确写入 Canvas ，但您的 Canvas 与显示它的 CSS 的纵横比不同，导致您看到的压扁效果。