Поворот многоугольника вокруг точки Javascript холста

Question

рисую многоугольник, используя следующий код:

drawPolygon = function(context, cX, cY, radius, sides) { 
    if (sides< 3) 
    return; 

    context.save(); 
    var anglePerSegment = Math.PI * 2/sides; 
    for (var i = 0; i <= sides; i++) { 
    var angle = anglePerSegment * i; 
    var x = cX+ radius * Math.cos(angle); 
    var y = cY+ radius * Math.sin(angle); 
    if (i == 0) { 
     context.moveTo(x, y); 
    } else { 
     context.lineTo(x, y); 
    } 
    } 
    context.fill(); 
    context.restore(); 
} 

Однако вращение немного смещено. Как бы повернуть его вокруг x и y? Я попытался перевести его в cX и cY, а затем поверните его, но это дает странные результаты.

Answer 1

Вот один из способов, чтобы повернуть правильный многоугольник вокруг своей центральной точки:

Подсказка: Если вы хотите перевести на центральной точки, то оставить от СХ & Cy при расчете х, у.

var canvas=document.getElementById("canvas"); 
 
var ctx=canvas.getContext("2d"); 
 
var cw=canvas.width; 
 
var ch=canvas.height; 
 

 
var sideCount=6; 
 
var size=100; 
 
var centerX=cw/2; 
 
var centerY=ch/2; 
 
var strokeWidth=4; 
 
var strokeColor='gray'; 
 
var fillColor='skyblue'; 
 
var rotationDegrees=0; 
 

 
requestAnimationFrame(animate); 
 

 
function animate(time){ 
 
    ctx.clearRect(0,0,cw,ch); 
 
    drawPolygon(sideCount,size,centerX,centerY,strokeWidth,strokeColor,fillColor,rotationDegrees) 
 
    rotationDegrees+=360/120; 
 
    requestAnimationFrame(animate); 
 
} 
 

 

 
function drawPolygon(sideCount,size,centerX,centerY,strokeWidth,strokeColor,fillColor,rotationDegrees){ 
 
    var radians=rotationDegrees*Math.PI/180; 
 
    ctx.save(); 
 
    ctx.translate(centerX,centerY); 
 
    ctx.rotate(radians); 
 
    ctx.beginPath(); 
 
    ctx.moveTo (size * Math.cos(0), size * Math.sin(0));   
 
    for (var i = 1; i <= sideCount;i += 1) { 
 
    ctx.lineTo (size * Math.cos(i * 2 * Math.PI/sideCount),size * Math.sin(i * 2 * Math.PI/sideCount)); 
 
    } 
 
    ctx.fillStyle=fillColor; 
 
    ctx.strokeStyle = strokeColor; 
 
    ctx.lineWidth = strokeWidth; 
 
    ctx.stroke(); 
 
    ctx.fill(); 
 
    ctx.restore();   
 
}

body{ background-color: ivory; } 
 
#canvas{border:1px solid red; margin:0 auto; }

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