Я начинаю работать с холстом Javascript (CanvasRenderingContext2D), и мне очень сложно выполнить центрирование текста.Я использую следующий фрагмент кода для центрирования текста по горизонтали и по вертикали:
ctx.textAlign = "center";
ctx.textBaseline = "middle";
Я знаю, что могу использовать ctx.measureText(), чтобы получить ширину строки, но высота не доступна в возвращаемомобъект.Я пытался использовать расширенные текстовые метрики, но они кажутся новыми, и моя сборка Firefox (последняя в магазине Ubuntu) пока не поддерживает ее, и я хочу, чтобы моя веб-страница была как минимум совместима с версиями браузера, выпущенными год назад.
Я могу центрировать текст прямо сейчас, но проблема заключается в центрировании двух объектов (изображения и фрагмента текста), как во второй ситуации на следующем изображении, где объекты должны быть центрированы вместе (например,они были единственным объектом, который содержал и изображение, и текст):
https://drive.google.com/file/d/1_P9826O1x0bFhRqPEKz_AB18iYNPa5CP/view?usp=sharing
Единственный способ, которым я могу думать об этом, - это знать высоту текста, потому что янеобходимо рассчитать как положение изображения, так и текста (псевдокод):
//I can do this
image.x = (canvas.width / 2) - image.width;
text.x = (canvas.width / 2) - text.width;
//But not this
image.y = (canvas.height / 2) - (image.height / 2) - (text.height / 2);
//Do this with top-left text align
text.y = (canvas.height / 2) + (image.height / 2) - (text.height / 2)
К сожалению, я нашел единственный способ получить высоту текста с помощью аппроксимаций "это вроде работает" ирендеринг текста на холст и получение его пиксельных данных, чтобы увидеть самый низкий пиксель, что плохо сказывается на производительности.
Что можно сделать, чтобы это исправитьи получить высоту текста лучше?Можно ли их центрировать, даже не имея высоты текста?Я хотел бы продолжать использовать элемент canvas, потому что это будет для игры, поэтому я не могу использовать HTML и CSS для центрирования объектов.Пожалуйста, используйте только простой Javascript (без таких вещей, как запрос).
Заранее спасибо.