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

Question

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/

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

2

javascript html5 math canvas trigonometry

Источник

user63887 21 ноя '10 в 01:26

1 ответ

Решение

Другие вопросы по тегам javascript html5 math canvas trigonometry

user333786 21 ноя '10 в 01:35 2010-11-21 01:35 · Accepted Answer · 2010-11-21 01:35

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

MDC говорит:

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

Так

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/