Координаты холста HTML5 дают странные углы

Я хочу иметь возможность ориентировать что-то на мышь на холсте HTML5. Но когда я использую Math.atan2 и другие триггерные функции, направления путаются. Он вращается в противоположном направлении и обычно отклоняется на 90 градусов.

Возможно, вам будет легче, если вы увидите это сами. Вот javascript:

var mouseX=0;
var mouseY=0;
var canvas = document.getElementById("world");
var context = canvas.getContext("2d");

function mouseMoveHandler(event) {
    mouseX = event.clientX;
    mouseY = event.clientY;
}

function windowResizeHandler() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
}

function loop() {
    // Clear Screen
    context.clearRect(0,0,canvas.width,canvas.height);

    // Calculate the angle to the mouse
    a = Math.atan2(mouseX-canvas.width/2,mouseY-canvas.height/2);

    // Draw a line in the direction of the mouse
    context.beginPath();
    context.fillStyle = "#000000";
    context.moveTo(canvas.width/2+10, canvas.height/2);
    context.lineTo(canvas.width/2-10, canvas.height/2);
    context.lineTo(canvas.width/2+Math.cos(a)*100, canvas.height/2+Math.sin(a)*100);
    context.fill();
}

document.addEventListener('mousemove', mouseMoveHandler, false);
window.addEventListener('resize', windowResizeHandler, false);
windowResizeHandler();
setInterval(this.loop, 1000 / 30 );

И вот HTML:

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<canvas id='world'></canvas>

<script type="text/javascript" src="test.js"></script>
</body>
</html>

Вы можете увидеть это в действии здесь: http://sidefofx.com/projects/stackOverflowQuestion/

Как я могу сделать линию точкой в ​​направлении мыши?


javascript canvas html trigonometry math
person cstack    schedule 21.11.2010    source источник

Ответы (1)


arrow_upward
5
arrow_downward

Я перепроверил, и что вы делаете неправильно (и я сам несколько раз делал эту ошибку), так это то, что atan2 сначала принимает координату y, затем координату x.

MDC говорит:

Обратите внимание, что аргументы этой функции сначала передают координату y, а затем координату x.

So 

a = Math.atan2(mouseX-canvas.width/2,mouseY-canvas.height/2);

должно быть

a = Math.atan2(mouseY-canvas.height/2, mouseX-canvas.width/2);

Обновлен тест: http://jsfiddle.net/79FaY/1/.

person Jakub Hampl    schedule 21.11.2010
comment
Мне это кажется странным. Почему вы используете sin для координаты x и cos для координаты y? - person cstack; 22.11.2010
comment
Да, ты прав. Проблема с atan2. Я обновил ответ. - person Jakub Hampl; 22.11.2010