Question

我整天都在苦苦挣扎。我可以使图像跟随鼠标指针，但当我尝试转动图像角度时，我无法使其工作。您可以在此处查看代码：jsbin example。鼠标以正确的方式跟着另一个黑色正方形，但我无法使用精灵图像。

Answer 1

您没有正确翻译以使旋转发生在图像的中心。你需要将宽度和高度的一半平移，进行旋转，然后平移。

我已更新您的SpriteImage渲染方法以正确翻译：

this.render = function(xPos, yPos, scale, w, h, angle) {
  ctx.save();

  ctx.translate(xPos, yPos);
  ctx.translate(w/2, h/2);
  ctx.rotate(angle);
  ctx.translate(-w/2, -h/2);
  ctx.fillRect(0, 0, w, h);

  //console.log('angle:',angle);
  ctx.drawImage(this.img, 
      this.x, this.y, 
      w, h, 
      0, 0, 
      width*scale, height*scale);
  ctx.restore();
};

[编辑] 这是jsbin的链接，其中包含更新的代码：http://output.jsbin.com/tulimaxavu/1/edit

在画布内制作图像精灵跟随鼠标

1 个答案: