Несоответствующий размер холста

Question

У меня есть холст HTML5 с высотой = 640. Я ожидаю, что текст со следующим стилем будет посередине

top = 320px; 
position = 'absolute'

Однако это идет ниже холста, и

top = 140px;

Похоже, что он находится по центру.

Скриншоты: 140_640 | 320_640

Что я ошибаюсь? Стоит ли пытаться использовать и делать это на JS, а не на CSS?

canvas.getContext("2d");

javascript html css

0

Emre 1 Янв 2018 в 14:07

Answer 1

Вы должны поместить текст внутри холста и использовать холст 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>

1

Ram Segev 1 Янв 2018 в 11:55

Answer 2

Если вам известна высота <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"

1

Ivan86 1 Янв 2018 в 11:28

Несоответствующий размер холста

2 ответа

Похожие вопросы

Новые вопросы

javascript