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

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

В этой публикации хочу рассмотреть создание одного элемента холста canvas при помощи JavaScript. Внутри этого элемента будут созданы два контекста визуализации с режимом «2d», которые будут представлять собой два квадрата.

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

То есть маленький квадрат должен быть расположен над большим. Как это сделать?

 

Пример кода с комментариями

 

<!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 с двумя контекстами визуализации</title>

</head>

<body>

    <script>

        // Создаём в документе новый элемент холста

        let cs = document.createElement(‘canvas’);

 

        // Присваиваем холсту значения ширины и высоты

        cs.width = 600;

        cs.height = 600;

 

        // Создаём первый контекст визуализации в режиме ‘2d’

        let ctx1 = cs.getContext(‘2d’);

        // Указываем стиль заполнения контекста. Фиолетовый цвет.

        ctx1.fillStyle = ‘#80475e’;

        // Указываем прямоугольную область заполнения цвета

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

 

        // Создаём второй контекст визуализации в режиме ‘2d’

        let ctx2 = cs.getContext(‘2d’);

        // Указываем стиль заполнения контекста. Жёлтый цвет.

        ctx2.fillStyle = ‘#f0f757’;

        // Указываем прямоугольную область заполнения цвета

        ctx2.fillRect(cs.width/4, cs.height/4, cs.width/2, cs.height/2);

 

        // Помещаем элемент холста внутрь элемента body для отображения его на странице

        document.body.append(cs);

    </script>

</body>

</html>

 

Как выглядит холст на странице?

Квадратный холст canvas с двумя контекстами визуализации 2d - JavaScript
Квадратный холст canvas с двумя контекстами визуализации 2d — JavaScript

 

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

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

Стандарт 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