javascript - Canvas 图像旋转不居中

Question

我想在 Canvas 上围绕其中心旋转图像。

预期:图像在其中心旋转

当前结果:图像旋转了一圈

代码包含:

1. 创建 sprite 并返回它的 sprite 类。
2. 用于更新 Sprite 位置的动画循环。

我尝试调整绘制图像方法的参数，但旋转没有居中。它似乎在它的 Angular 落旋转。出了什么问题？

var c = document.getElementById("myCanvas");

function sprite(options) {
  var that = {};
  that.context = options.context;
  that.width = options.width;
  that.height = options.height;
  that.image = options.image;

  that.x = options.x;
  that.y = options.y;
  that.angle = 0;

  that.render = function() {
    that.context.clearRect(that.x, that.y, that.width, that.height);

    that.context.save();
    that.context.translate(that.x + that.width / 2, that.y + that.height / 2);
    that.context.rotate(that.angle * Math.PI / 180);
    //---------------------->?? this is not working properly here.
    that.context.drawImage(
      that.image,
      0,
      0,
    );

    that.context.restore();

  };


  return that;

}

var ship_img = new Image();


ship_img.src = 'https://chrismalnu.files.wordpress.com/2016/01/f-15-cipher-copy.png?w=640';
var ctx = c.getContext("2d");

var coin = sprite({
  context: c.getContext("2d"),
  width: 100,
  height: 100,
  image: ship_img,
  x: 200,
  y: 200,
});


var sp1 = new Image();
sp1.src = 'https://pbs.twimg.com/media/B59SYYlCUAAL6A0.png';

var ssp = sprite({
    context: c.getContext("2d"),
    width: 50,
    height: 50,
    image: sp1,
    x:100,
    y:100,
});

dt = 3
document.onkeydown = function(e) {
  switch (e.keyCode) {
    case 37:
      // alert('left');
      coin.x -= dt;
      break;
    case 38:
      // alert('up');
      coin.y -= dt;
      break;
    case 39:
      // alert('right');
      // coin.x+=dt;
      coin.rotate();
      break;
    case 40:
      // alert('down');
      coin.y += dt;
      break;
  }
};

function mainLoop() {
  // coin.x+=1;
  coin.angle += 1;
  ssp.angle -=1;
  coin.render();
  ssp.render();

  requestAnimationFrame(mainLoop);
}

// Start things off
requestAnimationFrame(mainLoop);

<canvas id="myCanvas" width="600" height="390" style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>

View on JSFiddle

Answer 1

您正在目标 Canvas 上绘制左上角位于 0,0 的图像。
相反，以原点为中心绘制图像:

that.context.drawImage(
  that.image,
  -that.width / 2,
  -that.width / 2
);

我还建议只使用一个上下文并从主循环中清除 Canvas 。
示例如下:

var c = document.getElementById("myCanvas");

function sprite(options) {

  var that = {};
  that.width = options.width;
  that.height = options.height;
  that.image = options.image;

  that.x = options.x;
  that.y = options.y;
  that.angle = 0;

  that.render = function() {

   ctx.save();

    ctx.translate(
      that.x + that.width / 2,
      that.y + that.height / 2
    );

   ctx.rotate(that.angle * Math.PI / 180);

   ctx.drawImage(
      that.image,
      -that.width / 2,
      -that.height / 2,
      that.width,
      that.height
    );

    ctx.restore();

  };

  return that;

}

var ship_img = new Image();
ship_img.src = 'https://chrismalnu.files.wordpress.com/2016/01/f-15-cipher-copy.png?w=640';

var ctx = c.getContext("2d");

var img1 = sprite({
  width: 150,
  height: 150,
  image: ship_img,
  x: 100,
  y: 0,
});

var img2 = sprite({
  width: 50,
  height: 50,
  image: ship_img,
  x: 350,
  y: 70,
});


function mainLoop() {

  ctx.clearRect(0, 0, c.width, c.height);

  img1.angle += 1;
  img1.render();

  img2.angle -= 2;
  img2.render();

  requestAnimationFrame(mainLoop);
}

// Start things off
requestAnimationFrame(mainLoop);

<canvas id="myCanvas" width="500" height="150" style="border:1px solid #000000;">
Your browser does not support the HTML5 canvas tag.
</canvas>