javascript將x像素移向鼠標

Question

我的網頁上有一個機器人，機器人有一隻眼睛。我現在想讓眼睛跟着鼠標。

所以我加載了一個畫布，找到了眼睛的x和y以及鼠標的x和y，但是現在我無法將它移向鼠標。我嘗試了一些畢達哥拉斯，結果發現與Math.atan2的角度，但不明白我在那裏，因爲零度是正確的，左是-180等...反正：我在這個爛攤子。你可以幫我嗎？我現在沒有試用碼的代碼如下：

眼睛四周有4像素的空間！謝謝！

 // get canvas and context 
     var canvas = document.getElementById('robot'); 
     var ctx = canvas.getContext('2d'); 

     // wheres the eye 
     var x = 140, y = 80; 
     var rect = document.getElementById('robot').getBoundingClientRect();    
     var eyeX = rect.left + x; 
     var eyeY = rect.top + y; 

     // draw our robot on top of it 
     robot = new Image(); 
     robot.src = "robot.png"; 
     robot.onload = function() { 
      ctx.drawImage(robot, 0, 0); 
     }; 

     // give our friend an eye. He has been friendly 
     eye = new Image(); 
     eye.src = "eye.png"; 
     eye.onload = function() { 
      ctx.drawImage(eye, x, y); 
     }; 

     // Handle mouse 
     var mousePos; 
     window.onmousemove = handleMouseMove; 
     function handleMouseMove(event) { 
      event = event || window.event; // IE-ism 
      mousePos = { 
       x: event.clientX, 
       y: event.clientY 
      }; 
     } 

     // animate the eye towards the mouse. 
     var interval = setInterval(function() { 
      return function() { 
       ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); 
       ctx.drawImage(robot, 0, 0); 
       var pos = mousePos; 
       if (!pos) { 
        // no movement yet 
       } 
       else { 
        // change x and y based on direction 
        // HELP ME GUYS 
       } 
       ctx.drawImage(eye, x, y); 
      }; 
     }(), 1000/40);   

完整的工作答案，下面的答案幫助，但我固定它就像這樣。

 // get canvas and context 
     var canvas = document.getElementById('robot'); 
     var ctx = canvas.getContext('2d'); 
     // wheres the eye 
     var x = 140, y = 80; 
     var rect = document.getElementById('robot').getBoundingClientRect(); 
     var eyeX = rect.left + x; 
     var eyeY = rect.top + y; 

     var offSet = 4; 

     // draw our robot on top of it 
     robot = new Image(); 
     robot.src = "robot.png"; 
     robot.onload = function() { 
      ctx.drawImage(robot, 0, 0); 
     }; 
     // give our friend an eye. He has been friendly 
     eye = new Image(); 
     eye.src = "eye.png"; 
     eye.onload = function() { 
      ctx.drawImage(eye, x, y); 
     }; 

     window.onmousemove = handleMouseMove; 

     function draw(radianAngle) { 

      var newX = x + Math.cos(radianAngle) * offSet; 
      var newY = y + Math.sin(radianAngle) * offSet; 

      ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); 
      ctx.drawImage(robot, 0, 0); 
      ctx.drawImage(eye, newX, newY); 
     } 


     function handleMouseMove(e) { 
      e.preventDefault(); 
      mouseX = parseInt(e.clientX); 
      mouseY = parseInt(e.clientY); 
      var dx = mouseX - eyeX; 
      var dy = mouseY - eyeY; 
      draw(Math.atan2(dy, dx)); 
     } 

Answer 1

通過使用Math.atan2您正處於正確的軌道上。

下面是一個例子，一個演示：

var canvas = document.getElementById("canvas"); 
 
var ctx = canvas.getContext("2d"); 
 
var $canvas = $("#canvas"); 
 
var canvasOffset = $canvas.offset(); 
 
var offsetX = canvasOffset.left; 
 
var offsetY = canvasOffset.top; 
 

 
var PI2 = Math.PI * 2; 
 
var cx = 150; 
 
var cy = 150; 
 
var radius = 50; 
 
var strokewidth = 5; 
 
var thumbAngle = PI2/10; 
 

 
draw(PI2/10); 
 

 
$("#canvas").mousemove(function(e) { 
 
    handleMouseMove(e); 
 
}); 
 

 

 
function draw(radianAngle) { 
 

 
    // clear 
 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
 

 
    // circle 
 
    ctx.beginPath(); 
 
    ctx.arc(cx, cy, radius, 0, PI2); 
 
    ctx.strokeStyle = "black"; 
 
    ctx.lineWidth = strokewidth; 
 
    ctx.stroke(); 
 

 
    // indicator 
 
    ctx.beginPath(); 
 

 
    ctx.arc(cx, cy, radius - 25, radianAngle - thumbAngle/2, radianAngle + thumbAngle/2); 
 
    ctx.strokeStyle = "blue"; 
 
    ctx.lineWidth = strokewidth + 15; 
 
    ctx.stroke(); 
 

 
} 
 

 

 
function handleMouseMove(e) { 
 
    e.preventDefault(); 
 
    mouseX = parseInt(e.clientX - offsetX); 
 
    mouseY = parseInt(e.clientY - offsetY); 
 
    var dx = mouseX - cx; 
 
    var dy = mouseY - cy; 
 
    draw(Math.atan2(mouseY - cy, mouseX - cx)); 
 
}

body { 
 
    background-color: ivory; 
 
} 
 
#canvas { 
 
    border: 1px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<h4>Move mouse. Iris will follow.</h4> 
 
<canvas id="canvas" width=300 height=300></canvas>

Answer 2

這裏對如何計算角度的正弦和餘弦，然後計算出的座標另一個例子「視網膜」

http://jsfiddle.net/co2a1g0k/

想法

// cosine and sine; sin^2 + cos^2 = 1 
var x_component = cursor_x - eye_center_x; 
var y_component = cursor_y - eye_center_y; 
var hypotenuse = Math.sqrt(x_component * x_component + y_component * y_component); 
var cosine = x_component/hypotenuse; 
var sine = Math.sqrt(1 - cosine * cosine); 
// coordinates of retina according to the center of the eye 
var radius = (eye.right - eye.left)/2; 
var retina_x = radius * cosine; 
var retina_y = radius * sine; 
// correction for III. and IV. quadrant 
if(cursor_y < eye_center_y) { 
    retina_y *= -1; 
}