围绕点javascript画布旋转多边形答案

【问题标题】：Rotating a polygon around a point javascript canvas围绕点javascript画布旋转多边形
【发布时间】：2015-11-25 16:14:36
【问题描述】：

我使用以下代码绘制一个多边形：

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，然后旋转它，但它给出了奇怪的结果。

【问题讨论】：

标签： javascript canvas rotation 2d polygon

【解决方案1】：

这是围绕中心点旋转正多边形的一种方法：

提示：如果要转换为中心点，则在计算 x,y 时不要使用 cX 和 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; }

&lt;canvas id="canvas" width=300 height=300&gt;&lt;/canvas&gt;

【讨论】：