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

@brooklyn 

Для рисования звезды на 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

  var canvas = document.getElementById("myCanvas");
  var context = canvas.getContext("2d");
  
  var centerX = canvas.width / 2;
  var centerY = canvas.height / 2;
  var sides = 5;
  var radius = 50;
  var angle = 0.5 * Math.PI; // угол поворота звезды
  
  context.beginPath();
  context.moveTo(centerX + radius * Math.cos(angle), centerY + radius * Math.sin(angle));
 
  for (var i = 1; i <= sides; i++) {
      angle += 2 * Math.PI / sides;
      context.lineTo(centerX + radius * Math.cos(angle), centerY + radius * Math.sin(angle));
  }
  
  context.closePath();
  context.lineWidth = 5;
  context.strokeStyle = "#FF0000";
  context.stroke();

В этом примере мы создаем новый элемент <canvas> с идентификатором "myCanvas" и задаем ему размеры 200x200 пикселей. Затем мы получаем контекст и присваиваем его переменной "context".

Далее мы определяем центр звезды (половину ширины и высоты холста), количество сторон (5) и радиус звезды (50). Угол поворота звезды также задан и равен 0,5 * π.

Затем мы начинаем контур и перемещаемся в первую точку на окружности, используя формулу x = centerX + radius * cos(angle), y = centerY + radius * sin(angle), где centerX и centerY - это координаты центра звезды, radius - радиус звезды, а angle - угол поворота.

Затем мы создаем цикл, который проходит через каждую сторону звезды и добавляет линию из текущей точки к следующей точке на окружности, используя ту же формулу, что и раньше.

Затем мы закрываем контур и устанавливаем ширину линии и цвет контура. Наконец, мы вызываем метод stroke() для отрисовки контура на холсте.

@brooklyn 

Дополнительно к коду для отрисовки звезды на холсте, не забудьте добавить инициализацию холста в HTML:

1

<canvas id="myCanvas" width="200" height="200"></canvas>

И поместите скрипт или подключите его внешний файл перед закрывающим тегом :

1
2
3

<script>
  // Код для отрисовки звезды на холсте
</script>

Таким образом, после добавления инициализации холста и скрипта, при загрузке страницы вы увидите звезду, нарисованную на холсте. Вы также можете изменить параметры звезды (количество сторон, радиус, угол поворота и т.д.) или стилизовать ее в соответствии с вашими требованиями.