javascript - Canvas 大小不一致

Question

我有一个高度为 640 的 HTML5 Canvas 。我希望具有以下样式的文本位于中间

top = 320px; 
position = 'absolute'

然而这在 Canvas 下方，并且

top = 140px;

看起来是居中的。

截图: 140_640 | 320_640

我哪里错了？我应该尝试在 JS 而不是 CSS 中使用和执行它吗？

canvas.getContext("2d"); 

Answer 1

您应该将文本放在 Canvas 内，并使用 Canvas textAlign 和 fillText 设置内容和位置

var canvas = document.getElementById("gl-canvas");
var ctx = canvas.getContext("2d"); 
ctx.textAlign = "center";     
ctx.fillText(canvas.textContent,430, 320);

<canvas id="gl-canvas" width="860" height="640">
<div>
<span>Game Over! You...</span>
</div></canvas>