javascript将x像素移向鼠标

我的网页上有一个机器人，机器人有一只眼睛。我现在想让眼睛跟着老鼠

所以我把它们都放在画布上，找到了眼睛的x和y以及鼠标的x和y，但是现在我很难把它移向鼠标。我尝试了一些毕达哥拉斯，最后用数学找到了角度。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));
        }

---

通过使用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半径=50；
var strokewidth=5；
var thumbAngle=PI2/10；
抽签（PI2/10）；
$（“#画布”）.mousemove（函数（e）{
手推车（e）；
});
函数绘制（弧度角）{
//清楚的
clearRect（0，0，canvas.width，canvas.height）；
//圈
ctx.beginPath（）；
ctx.弧（cx，cy，半径，0，PI2）；
ctx.strokeStyle=“黑色”；
ctx.lineWidth=冲程宽度；
ctx.stroke（）；
//指示器
ctx.beginPath（）；
ctx.弧（cx，cy，半径-25，辐射角-指角/2，辐射角+指角/2）；
ctx.strokeStyle=“蓝色”；
ctx.lineWidth=行程宽度+15；
ctx.stroke（）；
}
功能手柄移动（e）{
e、 预防默认值（）；
mouseX=parseInt（e.clientX-offsetX）；
mouseY=parseInt（e.clientY-offsetY）；
var dx=鼠标x-cx；
var dy=mouseY-cy；
绘制（Math.atan2（mouseY-cy，mouseX-cx））；
}

正文{
背景颜色：象牙色；
}
#帆布{
边框：1px纯红；
}

移动鼠标。艾里斯会跟上来。

这里是如何计算角度的正弦和余弦，然后计算“视网膜”坐标的另一个示例

意念

//余弦和正弦；sin^2+cos^2=1
var x_分量=光标x-眼睛x中心x；
变量y\u分量=光标y-眼睛y中心y；
var斜边=Math.sqrt（x_分量*x_分量+y_分量*y_分量）；
var余弦=x_分量/斜边；
var sine=数学sqrt（1-余弦*余弦）；
//根据眼睛中心的视网膜坐标
变量半径=（eye.right-eye.left）/2；
var retina_x=半径*余弦；
视网膜var_y=半径*正弦；
//三象限和四象限校正
如果（光标y<眼睛y中心y）{
视网膜y*=-1；
}

嘿，伙计！谢谢，我会努力实现的！嘿，这里，我的情况有点不同，因为我没有像arc这样的函数，我可以输入我的atan角：D，所以我更新了我的问题，我如何解决它。一些罪恶和罪恶等。。。但是谢谢你的见解！总是乐于帮助任何寻求知识的人！

// 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;
}