Поворот треугольников вокруг центральной точки без перекрытия

Question

У меня есть HTML-холст размером 400x300, и я пытаюсь привлечь солнце, используя круг и 7 треугольников. Чтобы нарисовать треугольники, я делаю перевод, поворачиваю, переводю, как указано на this SO Answer. Однако некоторые треугольники перекрываются, как будто они имеют одинаковый угол.

http://codepen.io/ralrom/pen/bgZYRO

Я не могу понять, что это неправильно, я проверил вычисленный радиан, и все они находятся между 0 и 2 * PI.

var drawSun = function() { 

    // Circle 
    context.beginPath(); 
    context.arc(75, 75, 30, 0, Math.PI * 2, true); 
    context.closePath(); 
    context.fill(); 

    context.save(); 

    // Triangles 
    for (var i = 0; i < 7; i++) { 

     // Rotate the canvas around a point 
     angle = i * 360/7; 
     console.log(angle, angle * Math.PI/180); 
     context.translate(75, 75); 
     context.rotate(angle * Math.PI/180); 
     context.translate(-75, -75); 

     // Draw the triangle 
     context.beginPath(); 
     context.fillStyle = 'rgba(0,0,0,0.5)'; 
     context.moveTo(60, 35); 
     context.lineTo(75, 15); 
     context.lineTo(90, 35); 
     context.closePath(); 
     context.fill(); 

     context.restore(); 
    } 
} 

Answer 1

Иногда ответы здесь имеют много точек, но на самом деле это не так. Использование ctx.setTransform упрощает обработку преобразований, поскольку оно полностью заменяет существующее преобразование. Таким образом, нет необходимости сохранять государство, чтобы знать, где вы находитесь.

Это также помогает при рендеринге объектов всегда размещать свои координаты вокруг своего собственного центра вращения. Вы перемещаете этот центр туда, где вам это нужно.

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

var ctx = canvas.getContext('2d'); 
 

 
var drawSun = function(x,y,rad,count) { 
 
    var drawRay = function(ang){ 
 
    // Half width, note I get width from 2PI*r but as I need half I drop the 2 
 
    var width = (Math.PI * (rad + 5))/count; 
 
    ctx.setTransform(1,0,0,1,x,y); 
 
    ctx.rotate(ang); 
 
    ctx.beginPath(); 
 
    ctx.moveTo(-width, rad + 5); 
 
    ctx.lineTo(0, rad + 20); 
 
    ctx.lineTo(width, rad + 5); 
 
    ctx.fill(); 
 
    } 
 
    ctx.fillStyle = "#F90"; 
 
    ctx.setTransform(1,0,0,1,x,y); // move sun center to where it should be. 
 
    ctx.beginPath(); 
 
    ctx.arc(0, 0, rad, 0, Math.PI * 2, true); // draw sun at 0,0 
 
    ctx.fill(); 
 

 
    for (var i = 0; i < count; i++) { 
 
    drawRay((i/count) * Math.PI * 2); 
 
    // if you want to draw with first ray top center 
 
    // you need to offset by half a step 
 
    //drawRay(((i/count)-(count/2)) * Math.PI * 2); 
 
    } 
 
    // done and if you want you can reset to the default transform with 
 
    // ctx.setTransform(1,0,0,1,0,0); 
 
} 
 
drawSun(100,100,30,7);

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