javascript - 我将如何在 Canvas 上旋转图像以面向其运动方向？

Question

我有一把 fiddle here .我要问的是 spaceship 必须面向运动方向，因为不这样做是没有意义的。无论如何，我认为我遇到的问题是找到一个 Angular ，并在船移动到不同的地方时让船旋转该 Angular 。

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

• 您需要将 Canvas 平移到您将进行旋转的中心点
• 根据你的 Angular 旋转
• 画图
• 重置转换

在代码中是这些行:

 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 Angular 。当位置等于点击位置时，由于稍后添加 cos/sin，您将有一个非常小的值切换。

您可以通过在点击对象上缓存 Angular 来解决这个问题，就像这个版本一样:

FIDDLE fixing flicker

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

提示 1:创建船朝右的图像。这将对应于 0°，并避免您每次都添加 90°。

技巧 2:将 Angular 值和计算缓存一次，这样就不必每次都计算 atan2/cos/sin，因为它们是相对昂贵的操作。