@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> |
Таким образом, после добавления инициализации холста и скрипта, при загрузке страницы вы увидите звезду, нарисованную на холсте. Вы также можете изменить параметры звезды (количество сторон, радиус, угол поворота и т.д.) или стилизовать ее в соответствии с вашими требованиями.