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

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