HTML5 Leinwand Koordinaten geben seltsame Winkel

Ich möchte in der Lage sein, etwas in Richtung der Maus auf einem HTML5 Canvas zu orientieren. Aber wenn ich Math.atan2 und die anderen trigonometrischen Funktionen benutze, werden die Richtungen durcheinander gebracht. Es dreht sich in die entgegengesetzte Richtung, die es sollte und es ist normalerweise um 90 Grad ausgeschaltet.HTML5 Leinwand Koordinaten geben seltsame Winkel

Es wird wahrscheinlich einfacher sein, wenn Sie es selbst sehen. Hier ist die 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);

Und hier ist der HTML:

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

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

Sie können es in Aktion sehen hier: http://sidefofx.com/projects/stackOverflowQuestion/

Wie kann ich die Linie in die Richtung der Maus zu machen?

Quelle

2010-11-21 cstack

Ich überprüfte und was Sie falsch machen (und ich habe diesen Fehler ein paar Mal selbst gemacht) ist, dass atan2 zuerst die y-Koordinate akzeptiert, dann die x-Koordinate.

MDC sagt:

Hinweis, dass die Argumente dieser Funktion übergeben, die y-Koordinate zuerst und die x-Koordinate Sekunde. So

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

sollte

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

-Test aktualisiert werden: http://jsfiddle.net/79FaY/1/

Quelle

2010-11-21 01:35:03

Dies ist für mich seltsam scheint. Warum würden Sie sin für die x-Koordinate und cos für die y-Koordinate verwenden? – cstack

Ja, du hast Recht. Das Problem liegt bei 'atan2'. Ich habe die Antwort aktualisiert. –

HTML5 Leinwand Koordinaten geben seltsame Winkel

Antwort

Verwandte Themen