Динамическое изменение размера текста с помощью холста
Используя пакет node-canvas, мне нужно отобразить имя пользователя, которое может быть довольно большим. Мне нужно убедиться, что текст может динамически масштабировать его размер, чтобы он соответствовал заранее определенному изображению, чтобы имя никогда не обрезалось, оно просто уменьшалось, чтобы можно было отобразить больше символов. Я рассматривал возможность использования jimp и sharp, но не смог найти оптимального результата.
Спасибо.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вот как вы можете отображать текст в Javascript внутри canvas:
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
ctx.font = "30px Arial";
ctx.fillText("Hello World", 10, 50);
Вы можете установить шрифт как:
ctx.font = "30px Arial";
Это все, что вам нужно с чисто технической точки зрения. Однако, поскольку у вас есть ограничение по размеру, вам нужно будет придерживаться некоторых граничных ограничений. Чтобы увидеть, что подходит к каким размерам, вы можете использовать MeasureText. Вы также можете получить размеры холста, используя свойства width и height. Итак, если вы хотите реализовать это самостоятельно, вам придется поэкспериментировать с границами, размерами и шрифтами, пока вы не будете удовлетворены результатами.
В HTML/CSS есть разные типы единиц измерения, которые могут быть абсолютными или относительными. CSS EM, PX, PT, CM, IN…
Например, если вы используете «10px» в качестве высоты шрифта по умолчанию, он будет выглядеть одинаково на экране любого размера, но если вы используете «10vw», высота будет меняться в зависимости от ширины окна.
Вы также можете использовать «%» для того же эффекта, который обычно относится к размеру родительского элемента.
Но лучший вариант — создать функцию события, которая изменяет ширину шрифта в зависимости от размера холста, чтобы шрифт никогда не становился слишком большим или слишком маленьким.