По стандарту HTML мы знаем, что в браузере можно рисовать любую графику. За это рисование отвечает HTML-элемент canvas. Для манипулирования с пикселями, текстами, линиями и путями мы используем JavaScript.
Холст canvas представляет собой некоторое пиксельное пространство на котором размещаются «контексты рисования». По сути все изображения состоят из разных «контекстов рисования». Чем больше «контекстов рисования» размещается на холсте canvas, тем информативнее получается итоговое изображение.
В готовых прикладных интерфейсах программирования (API) для браузера не существует понятия круг. Вместо него используется более обобщённое понятие эллипса. Получается что круг — это эллипс с одинаковыми радиусами, исходящими из одной точки.
Подход к рисованию обычно такой. Сначала получаем форму (путь), а затем выполняем обводку этой формы (пути). Так на холсте появляется изображение. В нашем случае обводка будет представлять замкнутую линию. Мы в любой момент можем задать для этой линии толщину или цвет.
Для рисования путей обводки наших кругов мы будем использовать интерфейс «interface mixin CanvasDrawPath» и его методы beginPath() и stroke().
Метод beginPath() отвечает за объявление нового объекта пути. Метод stroke() отвечает за выполнение самой обводки для нового объекта пути.
Для рисования самой формы эллипса мы будем использовать интерфейс «interface mixin CanvasPath» и его метод ellipse().
HTML-код с JavaScript-кодом для рисования простого чёрного круга на белом фоне
<!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>
<h1>Круг на холсте canvas</h1>
<script>
let cs = document.createElement(‘canvas’);
cs.width = 500;
cs.height = 500;
let ctx = cs.getContext(‘2d’);
//ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle [, counterclockwise]);
ctx.beginPath();
ctx.ellipse(
cs.width/2, // центр круга по ширине
cs.height/2, // центр круга по высоте
cs.width/2—20, // радиус левый
cs.width/2—20, // радиус правый
0, // поворот эллипса для круга не имеет значения
180, // стартовый угол для левого радиуса
180); // конечный угол для правого радиуса
//ctx.lineWidth = 2;
//ctx.strokeStyle = ‘#ff0000’;
ctx.stroke();
document.body.append(cs);
</script>
</body>
</html>
Результат выполнения кода:
Мы не меняли базовые настройки рисования, поэтому обводка круга выполнилась в чёрном цвете с толщиной линии в два пикселя. Сам холст у нас белого цвета.
Хочу обратить внимание на значения радиусов. Мы используем выражение «cs.width/2-20». Мы используем радиус круга чуть меньше чем половина ширины самого холста.
Нам это нужно для того, чтобы линия обводки была полностью видна на поверхности холста. Если линию сделать толще и не отступить, то часть пикселей переедет за границу самого холста и мы получим не полное изображение круга.
Информационные ссылки
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
