Мы работаем с HTML-страницей в браузере и хотели бы в HTML-элементе «canvas» нарисовать красную линию, которая расположена диагонально относительно самого блока холста. Как это сделать?
Для создания объектов мы используем язык JavaScript и интерфейсы объектной модели документа DOM.
Пример HTML-файла с JavaScript кодом, который рисует красную диагональную линию на холсте canvas
<!DOCTYPE html>
<html lang=«en»>
<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>
<h1>Рисуем красную диагональную линию на холсте canvas на странице в браузере</h1>
<script>
// Создаём новый объект холста
let cs = document.createElement(‘canvas’);
// Ширина холста
cs.width = 500;
// Высота холста
cs.height = 500;
// Контекст рисования на холсте
let ctx = cs.getContext(‘2d’);
// Создаём ПУТЬ на холсте
ctx.beginPath();
// Указываем ширину линии
ctx.lineWidth = 5;
// Указываем стартовую позицию рисования линии
ctx.moveTo(0, 0);
// Указываем финишную позицию рисования линии
ctx.lineTo(cs.width, cs.height);
// Указываем цвет обводки для нашего ПУТИ
ctx.strokeStyle = ‘#ff0000’
// Обводим контур текущего ПУТИ
ctx.stroke();
// Добавляем наш холст последним ребёнком для HTML-элемента body
document.body.append(cs);
</script>
</body>
</html>
Как работает данный код?
Сначала мы создаём силами JavaScript новый объект HTML-элемента «canvas» и складываем его в переменную «cs«. Мы обращаемся к объекту document, который был построен браузером после получения нашего кода с HTML-разметкой. У объекта document мы вызываем метод createElement() и внутрь передаём один параметр — строку ‘canvas’. Теперь у нас есть холст.
После получения объекта холста мы указываем его ширину и высоту в пикселях. За это отвечают свойства с ключами «width» и «height«. Для простоты восприятия линии наш холст будет квадратным со стороной в 500 пикселей. Это значения более наглядное, чем по-умолчанию.
Далее нам нужно сказать каким образом мы будем отрисовывать нашу линию на холсте. За это отвечает объект, который называется «контекстом рисования на холсте». Мы обращаемся к холсту «cs» и у него вызываем метод getContext(). Внутрь метода мы передаём строку ‘2d’. Новый объект складываем в переменную «ctx«. Теперь у нас есть отдельный контекст рисования для нашей будущей линии.
Создаём новый объект пути методом beginPath() для объекта «контекста рисования». Для наглядности делаем линии толщиной в 5 пикселей — свойство «lineWidth«.
Затем указываем стартовую позицию рисования линии методом moveTo(). В качестве двух параметров передаём стартовое положение по оси X(горизонт) и по оси Y(вертикаль). В нашем случае это НОЛЬ и НОЛЬ.
Затем указываем финишную позицию рисования линии lineTo(). Также принимает два параметра. Значения берём из размеров самого холста — «cs.width» и «cs.height«. В нашем случае подставится ПЯТЬСОТ и ПЯТЬСОТ.
После этого указываем цвет обводки для нашего ПУТИ. Свойству «strokeStyle» присваиваем значение ‘#ff0000’.
Выполняем обводку ПУТИ методом stroke().
После всех модификаций помещаем наш холст с контекстом рисования на страницу документа методом append(), для объекта body.
На странице браузера отрисуется красная диагональная линия, которая будет идти вниз слева направо.
Информационные ссылки
JavaScript | Как создать холст canvas с красным квадратом 100 на 100 пикселей на странице?
Стандарт ECMAScript — https://tc39.es/ecma262/multipage/
Стандарт 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 — Раздел «Drawing paths to the canvas» — https://html.spec.whatwg.org/multipage/canvas.html#drawing-paths-to-the-canvas
