HTML5 координаты холста дают странные углы - PullRequest
Новая
       20

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

2 голосов
/ 21 ноября 2010

Я хочу иметь возможность ориентировать что-то в направлении мыши на холсте 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/

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

1 Ответ

5 голосов
/ 21 ноября 2010

Я перепроверил, и что вы делаете неправильно (и я сам несколько раз делал эту ошибку), так это то, что 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/

...