Question

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

    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位置简单地处理移动代码。有没有更简单的方法来实现这一目标？

Answer 1

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

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

This site还提供了大量关于如何使用它的信息，包括rotation，转换，转换以及使用它时可能需要的其他任何内容。

这应该很适合您的需求。

我认为我应该提供一个低级别，无框架的选项。基本上，使用原始的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

正如你所看到的，它有点不稳定，但它确实基本上解决了问题;它将方块向下移动并旋转。它还会在实际画布下方绘制旋转结果，以便您可以看到在引擎盖下发生了什么，但由于“中心”位于正方形的左上方，正方形会切断，不在中间。

最后，它实际上归结为你想要这样做。

Answer 2

我在玩弄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并跟踪翻译的步骤，并根据新的不关心先前状态为的步骤计算弧度的弧度。确保您也旋转到正方形所在的中心。

Answer 3

使用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 个答案: