В этой публикации хочу рассмотреть создание одного элемента холста 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>
Как выглядит холст на странице?
Информационные ссылки
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
