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，因为它们是相对昂贵的操作。

如何在画布上旋转图像以面对它的运动方向？

1 个答案: