我将如何旋转画布上的图像以面对其运动方向？

Question

我有一个小提琴here。 我要问的是宇宙飞船必须面向运动方向，因为不这样做是没有意义的。无论如何，我认为我遇到的问题是找到一个角度，并在船以不同的方式移动时让船旋转该角度。

function draw () { //Create and animates 
var angle = Math.atan2(clickedChords.y - player.y, clickedChords.x - player.x);
 ctx.clearRect(0,0,canvas.width,canvas.height);  

  ctx.fillStyle= 'white'; 
  ctx.beginPath();
  //Creates crossHair/nav marker
  ctx.arc(clickedChords.x,clickedChords.y,3,0,360);
  ctx.rect(clickedChords.x - 8,clickedChords.y - 1,16,2);     
  ctx.fill();

  ctx.drawImage(ships.blueBeginers,player.x-15,player.y-15);  

  player.x += Math.cos(angle); 
  player.y += Math.sin(angle);

  requestAnimationFrame(draw); //God  
  }
 draw();

我在翻译图像然后从图像中间旋转时也遇到了问题。这可能很简单，但我被卡住了。

谢谢你帮助我。

Answer 1

• 您需要将画布平移到要进行旋转的中心点
• 根据您的角度旋转
• 画图
• 重置转换

在代码中应该是以下几行：

 ctx.translate(player.x, player.y);    // translate to center of rotation
 ctx.rotate(angle + 0.5*Math.PI);      // rotate, here +90deg to comp image dir.
 ctx.translate(-player.x, -player.y);  // translate back
 ctx.drawImage(ships.blueBeginers,player.x-15,player.y-15);  // draw image
 ctx.setTransform(1,0,0,1,0,0);        // reset transforms (identity matrix)

FIDDLE

闪烁是因为您计算每帧的 atan2 角度。当位置等于点击位置时，由于稍后添加 cos/sin，您将有一个非常小的值切换。

您可以通过缓存点击对象上的角度来解决此问题：

FIDDLE fixing flicker

但是，您需要进行条件检查来停止动画，因为现在您只需添加 cos/sin 中的值，没有任何东西可以阻止它 (here is one way of doing it)。

提示 1：创建面向右侧的船的图像。这将对应于 0°，您无需每次添加 90°。

提示 2：将角度值和计算缓存一次，然后您不必每次都计算 atan2/cos/sin，因为它们是相对昂贵的操作。