JavaScript | Как создать холст canvas на странице без привязки контекста визуализации? — efim360.ru

JavaScript | Как создать холст canvas на странице без привязки контекста визуализации?

У нас есть шаблон HTML-документа:

<!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>
</script>
</body>
</html>

Мы хотим в этом документе создать элемент холста canvas в самом простом виде без привязки контекста визуализации. Как это сделать?

Шаг № 1 - Обращение к объекту документа для создания нового элемента

Внутри элемента <script> мы будем писать наш код. Когда браузер загрузит страницу, тогда он попытается выполнить JavaScript-код, который будет заключён внутри тегов <script></script>

В переменной cs мы будем хранить новый созданный объект canvas.

let cs = document.createElement('canvas');

 

Шаг № 2 - Добавление нового элемента в качестве ребёнка body

Теперь нам нужно поместить новый созданный объект canvas в текущий документ. Куда мы будем его помещать? Предлагаю просто положить его в элемент <body>.

document.body.append(cs);

Давайте посмотрим на результат выполнения двух команд. На первый взгляд нет никаких изменений. Вроде страница белая по всему экрану. Но.

Создали объект холста canvas и поместили его в body - JavaScript
Создали объект холста canvas и поместили его в body - JavaScript

Внутри элемента <body> теперь лежит наш новый созданный элемент <canvas>. Он имеет размеры 300 х 150 пикселей т. к. мы явно не указали его размеры. Из-за этого размеры холста были выставлены "по умолчанию". У холста нет контекста визуализации, а значит и нет заливки никаким цветом - из-за этого он прозрачный и мы видим белый цвет т. к. сама страница белая.

 

Из документации

Атрибут ширины width по умолчанию равен 300, а атрибут высоты height по умолчанию равен 150.

Когда "режим контекста холста" отсутствует, элемент холста canvas не имеет контекста визуализации, а его растровое изображение должно быть прозрачным чёрным с внутренней шириной, равной числовому значению атрибута ширины width элемента, и внутренней высотой, равной числовому значению атрибута высоты height элемента, эти значения интерпретируются в пикселях CSS и обновляются по мере установки, изменения или удаления атрибутов.

 

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

Стандарт HTML - Раздел "The canvas element" - https://html.spec.whatwg.org/multipage/canvas.html

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