Как нарисовать окружность с вырезом на 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();

1

<canvas id="myCanvas" width="200" height="200"></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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');

// Пример 1: Вырез сектора
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();

// Пример 2: Вырез прямоугольника
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI);
context.rect(centerX - radius / 2, centerY - radius / 2, radius, radius);
context.fillStyle = "#000000";
context.fill();

// Пример 3: Вырез круглого сегмента
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();