Question

我创建了一些函数，它们将绘制矩形，圆形，六边形等。其中一个看起来像这样：

rotation = 45;
function hex(hex_sides, hex_size, hex_color){
  x = ctx.canvas.width/2;
  y = ctx.canvas.height/2;

  ctx.save();
  ctx.rotate(rotation*Math.PI/180);
  ctx.translate(ctx.canvas.width/2, ctx.canvas.height/2);
  ctx.moveTo(x + hex_size * Math.cos(0), y + hex_size * Math.sin(0));
  ctx.restore();

  for (i = 0; i < hex_sides+1; i++) {
    ctx.lineTo(x + hex_size * Math.cos(i * 2 * Math.PI / hex_sides), y + hex_size * Math.sin(i * 2 * Math.PI / hex_sides));
  }

  ctx.strokeStyle = hex_color;
  ctx.stroke();
}

现在我调用函数在我的动画循环中绘制形状。

function loop() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  circle(200);
  circle(220);
  hex(6, 180, "#fff");
  rotation += 0.4;
  requestAnimationFrame(loop);
}

我在循环内递增var rotation，但它不会旋转整个形状，而只是旋转一行。其他形状我根本无法旋转。我认为我得到了错误的方法，可能是因为我对.save（）和.restore()或.beginPath()和.closePath()感到困惑。

一般来说，当我开始使用.translate()和.rotate()

时，行为非常奇怪

The entire Code is here.

更新这绝对是关于这一行的：

ctx.translate(ctx.canvas.width/2, ctx.canvas.height/2);

不知怎的，它无法正确翻译。旋转现在几乎发生在中间，但我希望对象围绕自己的轴旋转。

我将hex()功能更改为：

ctx.save();
ctx.translate(ctx.canvas.width/2, ctx.canvas.height/2);
ctx.rotate(rotation*Math.PI/180);
ctx.moveTo(x + hex_size * Math.cos(0), y + hex_size * Math.sin(0));
for (i = 0; i < hex_sides+1; i++) {
  ctx.lineTo(x + hex_size * Math.cos(i * 2 * Math.PI / hex_sides), y + hex_size * Math.sin(i * 2 * Math.PI / hex_sides));
}
ctx.strokeStyle = hex_color;
ctx.stroke();
ctx.restore();

动画循环中的对象旋转

0 个答案: