Алгоритм для рисования 5-точечной звезды

В настоящее время я работаю над решением для рисования стандартной 5-точечной звезды на холсте с использованием JavaScript. Я в стороне, но не могу понять это полностью. Я был бы признателен за любые советы или указатели, которые могут быть у кого-либо.

3
Пожалуйста, покажите, что вы сделали до сих пор.
добавлено автор Stefan Hanke, источник
Пять линий между пятью точками по кругу, разброс 4/5 pi друг от друга (охватывающий круг дважды)?
добавлено автор John Dvorak, источник

5 ответы

Я внесла некоторые изменения в код, который опубликовал Крис, так что это сработает для меня:

var alpha = (2 * Math.PI)/10; 
var radius = 12;
var starXY = [100,100]

canvasCtx.beginPath();

for(var i = 11; i != 0; i--)
{
    var r = radius*(i % 2 + 1)/2;
    var omega = alpha * i;
    canvasCtx.lineTo((r * Math.sin(omega)) + starXY[0], (r * Math.cos(omega)) + starXY[1]);
}
canvasCtx.closePath();
canvasCtx.fillStyle = "#000";
canvasCtx.fill();

Надеюсь, поможет...

3
добавлено

n point star, points are distributed evenly around a circle. Assume the first point is at 0,r (top), with the circle centred on 0,0, and that we can construct it from a series of triangles rotated by 2π/(2n+1):

5 point star

Определить функцию вращения:

function rotate2D(vecArr, byRads) {
    var mat = [ [Math.cos(byRads), -Math.sin(byRads)], 
                [Math.sin(byRads), Math.cos(byRads)] ];
    var result = [];
    for(var i=0; i < vecArr.length; ++i) {
        result[i] = [ mat[0][0]*vecArr[i][0] + mat[0][1]*vecArr[i][1],
                      mat[1][0]*vecArr[i][0] + mat[1][1]*vecArr[i][1] ];
    }
    return result;
}

Постройте звезду, вращая n треугольников:

function generateStarTriangles(numPoints, r) {
    var triangleBase = r * Math.tan(Math.PI/numPoints);
    var triangle = [ [0,r], [triangleBase/2,0], [-triangleBase/2,0], [0,r] ];
    var result = [];
    for(var i = 0; i < numPoints; ++i) {
       result[i] = rotate2D(triangle, i*(2*Math.PI/numPoints));
    }
    return result;
}

Определить функцию для рисования любого заданного массива полигонов:

function drawObj(ctx, obj, offset, flipVert) {
   var sign=flipVert ? -1 : 1;
   for(var objIdx=0; objIdx < obj.length; ++objIdx) {
      var elem = obj[objIdx];
      ctx.moveTo(elem[0][0] + offset[0], sign*elem[0][1] + offset[1]);
      ctx.beginPath();
      for(var vert=1; vert < elem.length; ++vert) {
        ctx.lineTo(elem[vert][0] + offset[0], sign*elem[vert][1] + offset[1]);
      }
      ctx.fill();
   }
}

Используйте приведенное выше, чтобы нарисовать 5-очную звезду:

var canvas = document.getElementsByTagName('canvas')[0];
var ctx = canvas.getContext('2d');
var offset = [canvas.width/2, canvas.height/2];
ctx.fillStyle="#000000";
var penta = generateStarTriangles(5, 200);
drawObj(ctx, penta, offset, true);

See it here http://jsbin.com/oyonos/2/

2
добавлено
Хорошо заметили, спасибо.
добавлено автор Phil H, источник
Есть ли какой-нибудь источник для поиска этих тригонометрических функций, например, какие тригонометрические функции могут рисовать.
добавлено автор defau1t, источник
Отличный ответ. Пожалуйста, в drawObj , измените penta [objIdx] на obj [objIdx]
добавлено автор seg.fault, источник

Я сам искал такой алгоритм и задавался вопросом, могу ли я сам его изобрести. Оказалось, что не слишком сложно. Итак, вот небольшая функция для создания звёзд и многоугольников с возможностью задания количества точек, внешнего радиуса и внутреннего радиуса (последнее применимо только к звездам).

function makeStar(c, s, x, y , p, o, i) {
    var ct = c.getContext('2d');
    var points =  p || 5;
    var outer_radius = o || 100;
    var inner_radius = i || 40;
    var start_x = x || 100;
    var start_y = y || 100;
    var new_outer_RAD, half_new_outer_RAD;
    var RAD_distance = ( 2 * Math.PI/points);  
    var RAD_half_PI = Math.PI /2; 
    var i;
    ct.moveTo(start_x, start_y);
    ct.beginPath();

    for (i=0; i <= points; i++) {
        new_outer_RAD = (i + 1) * RAD_distance;     
        half_new_outer_RAD = new_outer_RAD - (RAD_distance/2); 

        if (s) {
            ct.lineTo(start_x + Math.round(Math.cos(half_new_outer_RAD - RAD_half_PI) * inner_radius), start_y + Math.round(Math.sin(half_new_outer_RAD - RAD_half_PI) * inner_radius));
        }

        ct.lineTo(start_x + Math.round(Math.cos(new_outer_RAD - RAD_half_PI) * outer_radius), start_y + Math.round(Math.sin(new_outer_RAD - RAD_half_PI) * outer_radius));   

    }

    ct.stroke();
}

var canvas = document.getElementById('canvas');

makeStar(canvas);
makeStar(canvas, true, 120,200, 7, 110, 40);
1
добавлено
извините, у меня возникли проблемы с вставкой скрипта, последние две строки выпадали из окна сценария. В любом случае, это параметры: makeStar (холст, звезда (bool), смещение x, смещение y, # точки, внешний радиус, внутренний радиус)
добавлено автор Fab, источник

Вам нужно нарисовать внутренние биты, а полный круг - 2 * PI радиан. В приведенном ниже примере r - радиус охватывающей окружности. Ниже приведен код из проекта с открытым исходным кодом ( http://github.com/CIPowell/PhyloCanvas )

var alpha = (2 * Math.PI)/10; 
// works out the angle between each vertex (5 external + 5 internal = 10)
var r_point = r * 1.75;//r_point is the radius to the external point

for(var i = 11; i != 0; i--)//or i could = 10 and you could use closePath at the end
{
var ra = i % 2 == 1 ? rb: r;

var omega = alpha * i; //omega is the angle of the current point
    //cx and cy are the center point of the star.
node.canvas.lineTo(cx + (ra * Math.sin(omega)), cy + (ra * Math.cos(omega)));

}

//Store or fill.

NB: This is one of those many ways to skin a cat things, I'm sure someone else has another way of doing it. Also, the reason for the decremental loop rather than the incremental is preformance. i != 0 is more efficient than i < 10 and i-- is more efficient than i++. But performance matters a lot for my code, it might not be so crucial for yours.

1
добавлено

Это проблема, когда черепаховая геометрия делает вещи простыми:

5-точечная звезда:

повторить 5 раз:

fwd 100,    правый 144,    fwd 100,    слева 72,

0
добавлено
JavaScript Jobs — чат
JavaScript Jobs — чат
8 336 участник(ов)

JavaScript Jobs — чат для поиска работы и людей Правила оформления: https://teletype.in/@telegram-ru/r1WQe5F1m См. также: @mobile_jobs, @devops_jobs, @nodejs_jobs, @react_js, @angular_ru, @js_ru

JavaScript.ru
JavaScript.ru
7 932 участник(ов)

Сообщество сайта JavaScript.ru в Slack.

pro.js
pro.js
4 675 участник(ов)

Про JavaScript и NodeJS Invite: https://t.me/joinchat/Be4rsT5Rsgq30DHutjxXgA Правила: http://telegra.ph/ru-chat-rules-06-19 Вакансии только с ЗП, не чаще раза в неделю.

JavaScript — русскоговорящее сообщество
JavaScript — русскоговорящее сообщество
3 269 участник(ов)

Рекомендуем сразу отключить уведомления Правила: https://rudevs.network/ByaMH6un7 См. также: @js_noobs_ru, @nodejs_ru, @typescript_ru, @react_js, @electron_ru Вакансии и поиск работы: @javascript_jobs

JavaScript Noobs — сообщество новичков
JavaScript Noobs — сообщество новичков
2 484 участник(ов)

Чат для новичков

javascript_ru
javascript_ru
915 участник(ов)

Сообщество любителей самого популярного языка программирования в мире. Чат основан в 2009 году. Логи: https://goo.gl/9EOeM7 Поддержка бота: @chat_linker (ссылка на репу внутри) Вам будут интересны @frontend_ru и @css_ru

jsChat
jsChat
603 участник(ов)

Чат посвященный программированию на языке javaScript Перед отправкой ссылки на Ваш контент посоветуйтесь с админом Все ссылки удаляются ботом автоматически

JavaScript for Zombies Chat
JavaScript for Zombies Chat
492 участник(ов)

Чат про JavaScript для настоящих zombie! Вход строго по приглашениям! Ссылка для строгих приглашений: https://t.me/joinchat/AAMBHz3Uyr0tuZ7VaB029g

All That JS
All That JS
417 участник(ов)

JS на русском

Infernal Math
Infernal Math
389 участник(ов)

http://www.zepta.ru/index.php?title=Заглавная_страница Приглашение в чат: https://t.me/matheden

comput.math
comput.math
289 участник(ов)

Прикладная математика и численные методы. Без оффтопа, рекламы, флуда. Вышмат: @higher_math Физика: @physpub Новичкам: @starter_math @JuliaLanguage @rlang_ru Книги брать здесь: libgen.io И по хештегу #book

higher.math
higher.math
234 участник(ов)

Higher mathematics / высшая математика Подборка книжек: https://ru.stackoverflow.com/a/683632/1084 Вычмат: @comput_math Физика: @physpub LaTeX: @pro_latex

Starter Math
Starter Math
79 участник(ов)

Для тех, кто боится спросить в @higher_math Вычмат: @comput_math Физика: @physpub