У меня есть холст HTML5 с высотой = 640. Я ожидаю, что текст со следующим стилем будет посередине
top = 320px;
position = 'absolute'
Однако это идет ниже холста, и
top = 140px;
Похоже, что он находится по центру.
Что я ошибаюсь? Стоит ли пытаться использовать и делать это на JS, а не на CSS?
canvas.getContext("2d");
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>
Если вам известна высота <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"
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.