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

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