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

Пользователь

от jaylen.trantow , в категории: Другие , год назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от sherwood_littel , год назад

@jaylen.trantow 

Для рисования окружности с вырезом на Canvas можно использовать методы arc() и rect(). Есть несколько способов реализации в зависимости от требуемой формы выреза.


Пример 1: Вырез сектора

 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();


Пример 2: Вырез прямоугольника

 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();


Пример 3: Вырез круглого сегмента

 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();


Пользователь

от jeromy_ruecker , 24 дня назад

@jaylen.trantow 

Эти примеры позволяют нарисовать окружность с вырезом на Canvas. Вам нужно вызвать их в контексте canvas, например:

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();


Вы можете применять эти примеры в зависимости от формы выреза, которую вы хотите создать на вашем Canvas.