将方块旋转到某一点

时间:2016-04-07 07:02:46

标签: javascript html css rotation

我正试图让shooter0朝着角色(它会不断移动)旋转。我尝试使用atan(),然后将其转换为某个角度,但shooter0不会旋转。

var shooter0 = document.getElementById('shooter0');
var character = document.getElementById('character');
var tracker0 = shooter0.getContext('2d');
// The cordinates for the character and shooter0
var characterLeft = 530;
var characterTop = 180;
var shooter0Left = 960;
var shooter0Top = 470;

while (characterLeft >= 700){
  setInterval(startShooter, 1000);
}


function startShooter(){
  //Getting all the variable to be able to calculate the angle of the hypotenuse
  var dX = characterLeft - tracker0Left;
  var dY = characterTop - tracker0Top;
  var arcTan = Math.atan(dX/dY)* 180/Math.PI;

  var cx = shooter0.width/2;
  var cy = shooter0.height/2;


  tracker0.save();
  tracker0.translate(cx, cy); // pivot point
  //rotating the square towards the character
  tracker0.rotate(arcTan * Math.PI/180);
  //Drawing the square
  tracker0.fillRect(400, 300, 100, 100);
  tracker0.restore();
}

HTML:

<canvas id="character" height="50px;" width="50px;"></canvas>
<canvas id="shooter0" height="100px;" width="100px;"></canvas>

和CSS:

#character{
  position: absolute;
  top: 180px;
  left: 530px;
  border: 3px solid black;
  background-color: orange;
}
#shooter0{
  position: absolute;
  left: 960px;
  top: 470px;
  border: 2px solid black;
  background-color: #B40404;
}

很抱歉,如果您发现代码相当混乱。如果你觉得有用的话,这里是我所有代码的小提琴。 https://jsfiddle.net/Snubben/tc0j4psz/3/ 请不要使用任何JQuery。

1 个答案:

答案 0 :(得分:0)

由于某种原因,我无法让你的小提琴工作,所以我创造了一个小例子。

我在你的代码中注意到的事情:

var arcTan = Math.atan(dX/dY)* 180/Math.PI;Math.atan以弧度为单位返回一个角度。然后通过180/Math.PI

将其转换为度数

再次将它转换回弧度: tracker0.rotate(arcTan * Math.PI/180);

然后,为了计算角度(弧度),我认为Math.atan2最容易使用:Math.atan2 - MDN

使用Math.atan2来计算两点之间的角度是: Math.atan2(point2.y - point1.y, point2.x - point1.x)

有了这些信息,我认为你可以走得很远。

<强> demo fiddle