在畫布上旋轉移動對象

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。

該網站還提供了大量有關如何使用它的信息，包括旋轉 ，轉換，轉換以及使用它時可能需要的其他任何內容。

這應該很適合您的需求。

---

我想我也應該提供一個低級別，無框架的選項。 基本上，使用原始的JavaScript和HTML來解決這個問題。

現在，正如我理解你的問題，你正試圖讓一個物體（讓我們假設一個黑色方塊）向下移動並讓它旋轉。 我可以想到在畫布中旋轉它而不進入路徑地獄的唯一方法是旋轉整個渲染上下文。 但是你也可以將圖像導入畫布，例如透明的黑色鑽石（即同一個正方形旋轉）。 因此，您將使用單獨的畫布來渲染方形的旋轉的每個步驟。

基本上是這樣的：

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);

看看我的嘗試

正如你所看到的，它有點不穩定，但它確實基本上解決了問題; 它將方塊向下移動並旋轉。 它還會在實際畫布下方繪制旋轉結果，以便您可以看到引擎蓋下發生了什么，但由於“中心”位於正方形的左上方而不是中間，因此正方形會被切掉。

最后，它實際上取決於你想要怎么做。

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();