Метод 1: подход «Путь»
Один из способов создать фигуру звезды на холсте — использовать API пути. API пути позволяет вам определять серию соединенных линий и кривых для формирования сложных фигур. Вот пример разговорного кода для создания формы звезды:

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(75, 25);
ctx.lineTo(100, 75);
ctx.lineTo(150, 75);
ctx.lineTo(112.5, 115);
ctx.lineTo(125, 175);
ctx.lineTo(75, 140);
ctx.lineTo(25, 175);
ctx.lineTo(37.5, 115);
ctx.lineTo(0, 75);
ctx.lineTo(50, 75);
ctx.closePath();
ctx.fillStyle = 'yellow';
ctx.fill();

Метод 2: многоугольник.
Другой метод создания формы звезды — использование многоугольника с чередующимися точками. Вот пример разговорного кода:

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const centerX = 100;
const centerY = 100;
const radius = 50;
const numPoints = 5;
const angle = Math.PI / numPoints;
ctx.beginPath();
for (let i = 0; i < numPoints * 2; i++) {
  const radiusPoint = i % 2 === 0 ? radius : radius / 2;
  const x = centerX + Math.cos(i * angle) * radiusPoint;
  const y = centerY + Math.sin(i * angle) * radiusPoint;
  ctx.lineTo(x, y);
}
ctx.closePath();
ctx.fillStyle = 'blue';
ctx.fill();

Метод 3: подход Path2D
Если вы предпочитаете более лаконичный подход, вы можете использовать API Path2D, представленный в HTML5. Объект Path2D позволяет определять пути многократного использования, которые можно использовать несколько раз. Вот пример разговорного кода:

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const starPath = new Path2D();
starPath.moveTo(75, 25);
starPath.lineTo(100, 75);
starPath.lineTo(150, 75);
starPath.lineTo(112.5, 115);
starPath.lineTo(125, 175);
starPath.lineTo(75, 140);
starPath.lineTo(25, 175);
starPath.lineTo(37.5, 115);
starPath.lineTo(0, 75);
starPath.lineTo(50, 75);
starPath.closePath();
ctx.fillStyle = 'green';
ctx.fill(starPath);

Создать форму звезды на холсте можно с помощью различных подходов, таких как API пути, многоугольный подход или объект Path2D. Независимо от того, предпочитаете ли вы более подробный или краткий код, эти методы предоставляют вам гибкость для создания потрясающих фигур звезд в ваших проектах на холсте. Так что вперед, экспериментируйте и дайте волю своему творчеству!