JavaScript | Как создать холст canvas с красным квадратом 100 на 100 пикселей на странице? — efim360.ru

JavaScript | Как создать холст canvas с красным квадратом 100 на 100 пикселей на странице?

Суть задачи в том, чтобы использовать JavaScript для генерации нужной разметки HTML-документа, которая будет содержать в себе только один элемент холста canvas залитый квадратом красного цвета размером 100 на 100 пикселей. Как это сделать?

Ниже готовый код. Протестируйте!

<!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 с красным квадратом 100 на 100 пикселей на странице</title>

</head>

<body>

    <script>

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

        cs.width = 100;

        cs.height = 100;

        let ctx = cs.getContext('2d');

        ctx.fillStyle = "#FF0000";

        ctx.fillRect(0, 0, cs.width, cs.height);

        document.body.append(cs);

    </script>

</body>

</html>

Как это работает?

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

Обращаемся к текущему объекту документа (document), который был создан в момент открытия страницы в браузере. Для создания нового объекта холста мы используем метод createElement(). Внутрь метода мы передаём строковое представление названия нужного нам HTML-элемента. В нашем случае это строка 'canvas'. Для созданного объекта холста мы создаём ссылку-привязку при помощи объявления переменной cs (сокращение от canvas).

        cs.width = 100;

        cs.height = 100;

Для созданного объекта canvas мы задаём размеры холста. Они измеряются в пикселях. Ширина и Высота будут по 100 пикселей. Мы специально задали такие размеры, чтобы в итоге получился квадрат.

        let ctx = cs.getContext('2d');

Холсты не умеют жить самостоятельно. Создание объекта в документе всего навсего говорит о существовании некоего контейнера, в котором должна быть какая-то графика - со своими цветами, линиями, текстами, переходами и тому подобное.

За наполнение холста полезной графической информацией отвечает КОНТЕКСТ. У любого холста должен быть свой контекст визуализации. Всего из существует 5, но мы воспользуемся самым простым, который отвечает за плоские рисунки - это контекст "2d".

Привязать контекст к нужному холсту можно при помощи метода getContext(). Объект контекста мы сохраним в переменную ctx (сокращение от context)

        ctx.fillStyle = "#FF0000";

После привязки контекста мы должны создать СТИЛЬ для нашего КОНТЕКСТА. Мы решили получить красный квадрат, значит нужно произвести заливку нашего КОНТЕКСТА цветом "#FF0000". Цвет зафиксирован в свойстве fillStyle.

        ctx.fillRect(0, 0, cs.width, cs.height);

Теперь нужно указать координаты заливки цветом нашего КОНТЕКСТА, а также размер фигуры заливки. Метод fillRect() принимает 4 параметра.

Первые два параметра - это стартовое положение. 0 и 0 говорит о том, что заливка начнётся от левого верхнего угла.

Вторые два параметра - это расстояние, на которое будет произведена заливка - вправо и вниз. Измеряется также в пикселях. В нашем случае мы получаем расстояния заливки из значений свойств ширины и высоты самого объекта холста.

Это выражение позволит нам залить весь объект холста красным цветом от начала и до конца.

        document.body.append(cs);

Финальным шагом будет интеграция нашего объекта холста внутрь объекта body. Это нужно для того, чтобы мы смогли визуально увидеть результат наших манипуляций. В этом нам поможет метод append().

Итоговый результат

Красный квадрат 100 на 100 на холсте canvas - JavaScript
Красный квадрат 100 на 100 на холсте canvas - JavaScript

 

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

JavaScript | Холст canvas с двумя контекстами визуализации 2d

Стандарт DOM - Раздел "createElement(localName [, options])" - https://dom.spec.whatwg.org/#ref-for-dom-document-createelement①

Стандарт DOM - Раздел "append(nodes)" - https://dom.spec.whatwg.org/#ref-for-dom-parentnode-append①

Стандарт HTML - Раздел "width and height" - https://html.spec.whatwg.org/multipage/canvas.html#the-canvas-element:the-canvas-element-19

Стандарт HTML - Раздел "canvas.getContext(contextId [, options ])" - https://html.spec.whatwg.org/multipage/canvas.html#dom-canvas-getcontext-dev

Стандарт HTML - Раздел "context.fillStyle [ = value ]" - https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-fillstyle-dev

Стандарт HTML - Раздел "context.fillRect(x, y, w, h)" - https://html.spec.whatwg.org/multipage/canvas.html#dom-context-2d-fillrect-dev

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