[英]Inconsistent Canvas Size
如果您知道<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"
您应该将文本放置在画布中,并使用画布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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.