Текст центра (пропорциональный шрифт) в холсте HTML5

Я хотел бы иметь возможность центрировать отдельные строки текста в прямоугольных областях, которые я могу вычислить. Единственное, что я ожидал сделать в 2D-геометрии на холсте, - это центрировать нечто, ширина которого вам неизвестна.

Я слышал как обходное решение, что вы можете создать текст в контейнере HTML, а затем вызвать функцию jQuery width(), но я? неправильно обработал мгновенное дополнение к телу документа? и получил ширину 0.

Если у меня есть одна строка текста, значительно короче, чем заполнение большей части ширины на экране, как я могу определить, насколько она будет на холсте с размером шрифта, который я знаю?

ТИА,

Ответ 1

Если вам не требуется ширина текста, а просто хотите, чтобы текст центра можно было сделать

  canvas_context.textBaseline = 'middle';
  canvas_context.textAlign = "center";

Конец должен располагаться как по вертикали, так и по горизонтали.

Ответ 2

Вы можете сделать это, используя 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);

Live Demo

Более сложная демонстрация

Ответ 3

developer.mozilla.org указано в описании textAlign что выравнивание основано на значении x контекстного метода fillText(). То есть, свойство не центрирует текст в холсте горизонтально; он центрирует текст вокруг данной координаты x. Аналогично применяется для textBaseLine.

Итак, чтобы центрировать текст в обоих направлениях, нам нужно установить эти два свойства и поместите текст в середине холста.

ctx.textBaseline = 'middle'; 
ctx.textAlign = 'center'; 

ctx.fillText('Game over', canvas_width/2, canvas_height/2);

Ответ 4

То, что вы делаете, отображает текст за пределами экрана с помощью отрицательного текстового отступа, а затем захватывает размер.

text-indent: -9999px

Смотрите: скрывать текст с помощью" text-indent "