Суть задачи в том, чтобы использовать 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().
Итоговый результат
Информационные ссылки
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
