Я хотел бы иметь возможность центрировать отдельные строки текста в прямоугольных областях, которые я могу вычислить. Единственное, что я ожидал сделать в 2D-геометрии на холсте, - это центрировать нечто, ширина которого вам неизвестна.
Я слышал как обходное решение, что вы можете создать текст в контейнере HTML, а затем вызвать функцию jQuery width(), но я? неправильно обработал мгновенное дополнение к телу документа? и получил ширину 0.
Если у меня есть одна строка текста, значительно короче, чем заполнение большей части ширины на экране, как я могу определить, насколько она будет на холсте с размером шрифта, который я знаю?
ТИА,
Если вам не требуется ширина текста, а просто хотите, чтобы текст центра можно было сделать
canvas_context.textBaseline = 'middle';
canvas_context.textAlign = "center";
Конец должен располагаться как по вертикали, так и по горизонтали.
Вы можете сделать это, используя measureText
var canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d")
canvas.width = 400;
canvas.height = 200;
ctx.fillStyle = "#003300";
ctx.font = '20px san-serif';
var textString = "Hello look at me!!!",
textWidth = ctx.measureText(textString ).width;
ctx.fillText(textString , (canvas.width/2) - (textWidth / 2), 100);
developer.mozilla.org указано в описании textAlign
что выравнивание основано на значении x контекстного метода fillText(). То есть, свойство не центрирует текст в холсте горизонтально; он центрирует текст вокруг данной координаты x. Аналогично применяется для textBaseLine.
Итак, чтобы центрировать текст в обоих направлениях, нам нужно установить эти два свойства и поместите текст в середине холста.
ctx.textBaseline = 'middle';
ctx.textAlign = 'center';
ctx.fillText('Game over', canvas_width/2, canvas_height/2);
То, что вы делаете, отображает текст за пределами экрана с помощью отрицательного текстового отступа, а затем захватывает размер.
text-indent: -9999px
Смотрите: скрывать текст с помощью" text-indent "