Как нарисовать окружность с вырезом на Canvas?

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

// Определяем координаты центра и радиус окружности
const centerX = 100;
const centerY = 100;
const radius = 50;

// Определяем углы начала и конца сектора
const startAngle = 0;
const endAngle = Math.PI * 2;

// Начинаем отрисовку фигур
context.beginPath();

// Рисуем окружность
context.arc(centerX, centerY, radius, startAngle, endAngle);

// Рисуем сектор, который нужно вырезать
context.moveTo(centerX, centerY);
context.lineTo(centerX + radius, centerY); // линия из центра до границы окружности
context.arc(centerX, centerY, radius, startAngle, endAngle, true); // дуга в обратном направлении
context.closePath();

// Закрашиваем оставшуюся фигуру
context.fillStyle = "#000000";
context.fill();

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

// Определяем координаты центра и радиус окружности
const centerX = 100;
const centerY = 100;
const radius = 50;

// Определяем координаты левого верхнего угла прямоугольника
const rectX = centerX - radius / 2;
const rectY = centerY - radius / 2;

// Определяем ширину и высоту прямоугольника
const rectWidth = radius;
const rectHeight = radius;

// Начинаем отрисовку фигур
context.beginPath();

// Рисуем окружность
context.arc(centerX, centerY, radius, 0, 2 * Math.PI);

// Рисуем прямоугольник, который нужно вырезать
context.rect(rectX, rectY, rectWidth, rectHeight);

// Закрашиваем оставшуюся фигуру
context.fillStyle = "#000000";
context.fill();

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

// Определяем координаты центра и радиус окружности
const centerX = 100;
const centerY = 100;
const radius = 50;

// Определяем углы начала и конца кругового сегмента
const startAngle = 0;
const endAngle = Math.PI;

// Определяем координаты точек на границе окружности, которые соответствуют начальному и конечному углам
const startX = centerX + radius * Math.cos(startAngle);
const startY = centerY + radius * Math.sin(startAngle);
const endX = centerX + radius * Math.cos(endAngle);
const endY = centerY + radius * Math.sin(endAngle);

// Начинаем отрисовку фигур
context.beginPath();

// Рисуем окружность
context.arc(centerX, centerY, radius, 0, 2 * Math.PI);

// Рисуем круговой сегмент, который нужно вырезать
context.moveTo(centerX, centerY);
context.lineTo(startX, startY); // линия из центра до начальной точки
context.arc(centerX, centerY, radius, startAngle, endAngle, true); // дуга в обратном направлении
context.lineTo(centerX, centerY); // линия из конечной точки до центра
context.closePath();

// Закрашиваем оставшуюся фигуру
context.fillStyle = "#000000";
context.fill();