在 HTML5 画布中定位文本答案

【问题标题】：Positioning text in HTML5 canvas在 HTML5 画布中定位文本
【发布时间】：2020-03-30 14:34:50
【问题描述】：

我正在尝试将文本放置在 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);

&lt;canvas id="cv" style="border: 1px solid black; height: 64px; width: 300px;"&gt;&lt;/canvas&gt;

【问题讨论】：

【解决方案1】：

你没有给你的画布一个初始大小，你需要传入 size 属性（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 的纵横比不同，导致您看到的是压扁效果。

【讨论】：