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，您已走上正轨。

以下是一个示例和一个演示：

enter image description here

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

这里是另一个如何计算角度的正弦和余弦，然后计算＆＃34;视网膜的坐标的例子。

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

javascript将x像素移向鼠标

2 个答案: