canvas | Как создать текст? — efim360.ru

canvas | Как создать текст?

Шаг № 1 - Создаём объект canvas через JavaScript

На первом шаге нам нужно получить новый объект холста canvas, который мы положим в переменную, чтобы иметь возможность управлять его содержимым. Для этого нам понадобится JavaScript и DOM, которые работают в браузере.

let my_canvas = document.createElement('canvas');

Шаг № 2 - Создаём для объекта canvas контекст визуализации

Элементы холста не существуют сами по себе. По умолчанию холст заливается прозрачным чёрным цветом. В таком виде холст бесполезен и нам нужно создать для него оформление.

Оформление (дизайн) задаётся при помощи "контекстов визуализации". Именно контекстов, потому что на одном холсте можно отрисовывать много разнообразных контекстов визуализации.

В нашем случаем мы создадим всего один - называется он '2d'.

let context = my_canvas.getContext('2d');

 

Шаг № 3 - Нанесение текста на растровое изображение для объекта canvas

Для помещения текста на наш холст мы должны воспользоваться методом fillText(text, x, y [, maxWidth ])

Ещё важно знать, что при создании объекта, реализующего интерфейс CanvasTextDrawingStyles, шрифт контекста должен быть установлен на 10 пикселей без засечек.

context.fillText('Привет из 2022 года', 0, 0);

В таком виде текст попытается разместиться на холсте, но выпадет за границы холста. Мы лишь увидим некоторые нижние "хвостики букв".

Текст не попал на холст canvas из-за нулевых координат
Текст не попал на холст canvas из-за нулевых координат

Вместо нулевых координат нужно указать что-то адекватное.

Первая координата - это горизонтальный сдвиг вправо.

Вторая координата - это вертикальный сдвиг вниз.

Давайте сделаем 30 и 30, чтобы наконец-то увидеть наш текст на холсте canvas.

Сдвинули текст в видимую часть холста canvas
Сдвинули текст в видимую часть холста canvas

Полный код

<!DOCTYPE html>

<html lang="ru">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Как создать текст в canvas через JavaScript?</title>

</head>

<body>

    <script>

        let my_canvas = document.createElement('canvas');

        let context = my_canvas.getContext('2d');

        context.fillText('Привет из 2022 года', 30, 30);

        document.body.append(my_canvas);

    </script>

</body>

</html>

 

Информационные ссылки

canvas | Как изменить размер холста?

HTML | Элемент canvas

Стандарт HTML - Раздел "4.12.5 The canvas element" - https://html.spec.whatwg.org/multipage/canvas.html

Поделись записью