畫布大小不一致

Question

我有一個高度為640的HTML5畫布。我希望以下樣式的文本位於中間

top = 320px; 
position = 'absolute'

但是，它位於畫布下方，並且

top = 140px;

看起來像是居中。

截圖： 140_640 | 320_640

我怎么了？ 我應該嘗試在JS中而不是CSS上使用它嗎？

canvas.getContext("2d"); 

Answer 1

如果您知道<span id="game-over">的高度，則只需執行以下操作：

// Add this to your CSS for #game-over
// example span id="game-over" height of 200px;
#game-over
{
    position:absolute;
    top:50%;
    margin-top:-100px;
}

如果您不知道<span id="game-over">身高，那么我會這樣做：

// Add this to your CSS for #game-over
#game-over
{
    position:absolute;
    top:50%;
}

要檢查元素的高度並在javascript設置邊距：

var gameOver = document.getElementById("game-over");
// get height
var heightOfText = gameOver.style.height;
// get half of height
heightOfText = parseInt(heightOfText)/2;
// set negative margin to center it
gameOver.style.marginTop = "-" + heightOfText.toString() + "px"

Answer 2

您應該將文本放置在畫布中，並使用畫布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>