Canvas: базовая работа с текстом

10

Рисование базового текста

Для рисования просто текста, мы будем использовать две функции:
* fillText — fillText(text,xCoord,yCoord,maxWidth)
* strokeText — strokeText(text,xCoord,yCoord,maxWidth)

Каждая из этих функций принимает 4 аргумента.
Первый — текст, который будет написан.
Второй и третий — координаты определяющие положение текста.
Последний — не обязательный, определяет максмально дозволенную ширину текста скукоживая текст.

Чтобы установить параметры шрифта, нужно воспользоваться атрибутом font

    context.font='450px Verdana';

    let fText = `Fill Text on Canvas`;
    context.fillText(fText, 10, 400, 300);
    context.strokeText(fText, 10, 640);

Как стилизовать наш текст более подробно

Своейство context.font принимает множество аргументов, среди них:
* font-style
* font-weight
* font-size
* font-family

По сути, аналогичные как в CSS.

context.font = "font-style font-weight font-size font-family"

Позиционирование текста

Мы размещаем текст на канвасе с помощью укзаания точки (x,y). Но точнее, где канвас рисует текст зависит от еще двух свойств: textAlign и textBaseline.
Каждый текст на холсте точно спозиционирован комбинацией x-координаты, y-координаты, textAlign и textBaseline аттрибутами.

textAlign атрибут определяет как текст выравнен горизонтально.
textBaseline определяет как текст выравнен вертикально.

You might also like More from author

Leave A Reply

Your email address will not be published.