角度针旋转

Question

你好，我想写一个有趣的简单的程序。但我在针的土地它沿用了后我不能够得到的旋转角度，并把它转换成数crusor.I让针跟在表盘内。我包括我的JavaScript代码。有人可以帮我吗？

function alienEye(x, y, size, append, img, theNum) { 
    var self = this; 
    var i = 0; 
    var myintID; 
    this.x = x; 
    this.y = y; 
    this.size = size; 

    //Create the Eye Dom Node using canvas. 
    this.create = function create(x, y, size, append) { 
     //Create dom node 
     var eye = document.createElement('canvas'); 
     eye.width = size; 
     eye.height = size; 
     eye.style.position = 'relative'; 
     eye.style.top = y + 'px'; 
     eye.style.left = x + 'px'; 
     document.getElementById(append).appendChild(eye); 
     //Get canvas 
     canvas = eye.getContext("2d") 



     radius = size/2; 

     //draw eye 
     //canvas.beginPath(); 
     //canvas.arc(radius, radius, radius, 0, Math.PI*2, true); 
     //canvas.closePath(); 
     //canvas.fillStyle = "rgb(255,255,255)"; 
     //canvas.fill(); 
     //draw pupil 
     //canvas.beginPath(); 
     //canvas.arc(radius, radius/2, radius/4, 0, Math.PI*2, true); 
     //canvas.closePath(); 
     //canvas.fillStyle = "rgb(0,0,0)"; 
     //canvas.fill(); 

     //var img = new Image(); 

     canvas.drawImage(img, - 20, - 20, 100, 100); 


     img.onload = function() { 
      canvas.drawImage(img, - 20, - 20, 100, 100); 
     } 

     img.src = 'Stuff/needle.png'; 


     return eye; 
    } 
    //Rotate the Dom node to a given angle. 
    this.rotate = function (x) { 
     this.node.style.MozTransform = "rotate(" + x + "deg)"; 
     this.node.style.WebkitTransform = "rotate(" + x + "deg)"; 
     this.node.style.OTransform = "rotate(" + x + "deg)"; 
     this.node.style.msTransform = "rotate(" + x + "deg)"; 
     this.node.style.Transform = "rotate(" + x + "deg)"; 

    } 


    this.letsBegin = function() { 
     //Update every 100 miliseconds 
     myintID = setInterval(function() { 
      //Math! 
      angleFromEye = Math.atan2((cursorLocation.y - self.my_y), cursorLocation.x - self.my_x) * (180/Math.PI) + 90; 
      //Rotate 
      self.rotate(angleFromEye); 
      //Refresh own position every 25th time (in case screen is resized) 
      i++; 
      if (i > 25) { 
       self.locateSelf(); 
       i = 0; 
      } 

     }, 20); 
    } 

    this.letsEnd = function() { 
     clearInterval(myintID); 
    } 


    this.locateSelf = function() { 
     this.my_x = this.node.offsetLeft + (this.size/2); 
     this.my_y = this.node.offsetTop + (this.size/2); 
     //If it has offsetParent, add em up to get the objects full position. 
     if (this.node.offsetParent) { 
      temp = this.node; 
      while (temp = temp.offsetParent) { 
       this.my_x += temp.offsetLeft; 
       this.my_y += temp.offsetTop; 
      } 
     } 
    } 

    //Call the node create function when the AlienEye Object is created. 
    this.node = this.create(x, y, size, append); 
    this.locateSelf(); 
    //Now the node has been added to the page, lets figure out exact where 
    //it is relative to the documents top. 

    //Get the basic position 



    var cursorLocation = new function() { 
      this.x = 0; 
      this.y = 0; 
      //This function is called onmousemove to update the stored position 
      this.update = function (e) { 
       var w = window, 
        b = document.body; 
       this.x = e.clientX + (w.scrollX || b.scrollLeft || b.parentNode.scrollLeft || 0); 
       this.y = e.clientY + (w.scrollY || b.scrollTop || b.parentNode.scrollTop || 0); 
      } 

      //Hook onmousemove up to the above update function. 
      document.onmousemove = function (e) { 
       cursorLocation.update(e); 
      }; 

Answer 1

如果这就是您的所有代码，您只需调用函数即可。

我设法得到它运行加入这个到脚本的底部（的body元素被赋予了“身体”的ID）：

var img = new Image(); 
img.src = "Stuff/needle.png"; 

var eye = new alienEye(40, 40, 50, "body", img, 20); 
eye.letsBegin(); 

编辑：

这里就是我得到了角度基于我的GameAPI中的两点。这是有点冗长...主角码是在底部：

getAngle  : function(point1X, point1Y, point2X, point2Y, hyp) { 


      //This function uses the arcsine to calculate the angle between 
      //the points, but only if necessary. 

      //This function includes some shortcuts for common angles. 


      if(point1Y == point2Y) { 
       if(point1X < point2X) return 0; 
       else     return 180; 
      } 

      if(point1X == point2X) { 
       if(point1Y < point2Y) return 90; 
       else     return 270; 
      } 


      var xDist = point1X - point2X; 
      var yDist = point1Y - point2Y; 


      if(xDist == yDist) { 
       if(point1X < point2X) return 45; 
       else     return 225; 
      } 
      if(-xDist == yDist) { 
       if(point1X < point2X) return 315; 
       else     return 135; 
      } 


      if(hyp==null) 
       hyp = Math.sqrt(xDist*xDist + yDist*yDist); 


      var D_TO_R = this.D_TO_R; 


      if(point1X<point2X) { 
       //console.log(Math.round(-Math.asin((point1Y-point2Y)/hyp) * D_TO_R)); 
       return Game.Util.fixDirection(-Math.asin((point1Y-point2Y)/hyp) * this.D_TO_R); 
      } else { 
       //console.log(Math.round(Math.asin((point1Y-point2Y)/hyp) * D_TO_R + 180)); 
       return Game.Util.fixDirection(Math.asin((point1Y-point2Y)/hyp)  * this.D_TO_R+180); 
      } 

     } 

（该D_TO_R为弧度/角度转换的恒定180/PI的Game.Util.fixDirection确保的角度为0和360之间的。 hyp的说法是，如果直角三角形的hypothenuse已经知道一个可选的参数，以节省CPU周期）