在画布上旋转移动对象答案

【问题标题】：Rotate Moving Object on Canvas在画布上旋转移动对象
【发布时间】：2013-02-23 12:02:22
【问题描述】：

我正在尝试根据它的旋转属性来绘制一个对象，但是当对象移动时它似乎会感到困惑。

    ctx.save();
    ctx.translate(this.width * 0.5, this.height*0.5);
    ctx.rotate(DegToRad(45));
    ctx.translate(-this.width*0.5,-this.height*0.5);
    ctx.drawImage(this.img, this.spriteOffset, 0, this.width, this.height, this.x, this.y,this.width,this.height);
    ctx.restore();

图像被旋转 45 度绘制，但它现在向左下方向移动，此时对象应该只向下移动。通过增加 this.y 位置可以简单地处理移动代码。有没有更简单的方法来做到这一点？

【问题讨论】：

标签： javascript html canvas

【解决方案1】：

这是因为整个画布正在旋转。

您可以尝试研究像 Kinetic JS 这样的框架，它为画布创建了一种 SVG API。

This site 也有大量关于如何使用它的信息，包括 rotation、transition、transformation 以及您在使用它时可能需要的几乎所有其他信息。

这应该很适合您的需求。

我认为我也应该提供一个低级、无框架的选项。基本上，使用原始 javascript 和 HTML 来实现这一点。

现在，正如我理解您的问题一样，您正试图让一个物体（假设一个黑色方块）向下移动并让它旋转。我能想到的在画布中旋转它而不进入 path hell 的唯一方法是旋转整个渲染上下文。但是您也可以将图像导入画布，例如透明的黑色菱形（即旋转的同一个正方形）。因此，您将使用单独的画布来渲染正方形的每一步旋转。

基本上是这样的：

var canvas2 = document.createElement('canvas'), ctx2 = canvas2.getContext('2d');
//do something with the second canvas
//let's assume the second canvas is the same size as the square
ctx.drawImage(canvas2, squareX, squareY);

See my attempt

正如您所看到的，它有点不稳定，但它确实完成了问题所要求的工作；它向下移动正方形，然后旋转它。它还会在实际画布下方绘制旋转的结果，以便您可以看到引擎盖下发生了什么，但是由于“中心”位于正方形的左上角，正方形被切掉了，并且不在中间。

最后，这真的取决于你想怎么做。

【讨论】：

【解决方案2】：

在应用旋转之前使用 ctx.translate 设置对象的位置。这应该可以解决问题。

ctx.save();
ctx.translate(this.x, this.y);

ctx.translate(this.width * 0.5, this.height*0.5);
ctx.rotate(DegToRad(45));
ctx.translate(-this.width*0.5,-this.height*0.5);

ctx.drawImage(this.img, this.spriteOffset, 0, this.width, this.height, 0, 0,this.width,this.height);
ctx.restore();

【讨论】：

【解决方案3】：

我正在使用 API，发现跟踪对象应该的位置更容易。这是一个正方形在屏幕上沿对角线移动并旋转的示例。

<canvas id="canvas" style="width: 100%; height: 100%;">
</canvas>

<script>
  var DELAY = 15; // ms
  var RECT_WIDTH = 100; // px
  var RECT_HEIGHT = 100; // px

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

  // set intrinsic dimensions
  canvas.width = 1000;
  canvas.height = 1000;
  var ctx = canvas.getContext('2d')
  ctx.fillStyle = 'teal';

  var step = 0
  var vx = 2
  var animate = setInterval(function () {
    ctx.resetTransform()
    ctx.clearRect(0, 0, 1000, 1000);
    ctx.translate(vx * step, vx * step);

    // rotation in place, translate to center of square and back
    ctx.translate(RECT_WIDTH / 2, RECT_HEIGHT / 2);
    ctx.rotate((Math.PI / 180) * step);
    ctx.translate(-(RECT_WIDTH / 2), -(RECT_HEIGHT / 2));

    // Draw the rectangle
    ctx.fillRect(0, 0, RECT_WIDTH, RECT_HEIGHT);
    step = step + 1
  }, DELAY)

  setTimeout(function () {
    clearInterval(animate);
  }, 5000);
</script>

在这里，我使用vx 并跟踪要平移的步骤，并根据新的不关心之前的状态的步骤计算旋转的弧度。确保你旋转过你所在的正方形的中心。

【讨论】：