Les coordonnées de canvas HTML5 donnent des angles étranges

Je veux être capable d'orienter quelque chose vers la souris sur un canevas HTML5. Mais quand j'utilise Math.atan2 et les autres fonctions trigonométriques, les directions se gâchent. Il tourne dans la direction opposée à celle qu'il devrait et il est généralement de 90 degrés.Les coordonnées de canvas HTML5 donnent des angles étranges

Ce sera probablement plus facile si vous le voyez par vous-même. Voici le 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);

Et voici le code HTML:

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

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

Vous pouvez le voir en action ici: http://sidefofx.com/projects/stackOverflowQuestion/

Comment puis-je faire le point de la ligne dans la direction de la souris?

Source

2010-11-21 cstack

J'ai revérifié et ce que vous faites mal (et j'ai fait cette erreur plusieurs fois moi-même) est que atan2 accepte d'abord la coordonnée y, puis la coordonnée x.

MDC dit:

Notez que les arguments de cette fonction passent la coordonnée y d'abord et les coordonnées x secondes.

Alors

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

devrait être

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

test mis à jour: http://jsfiddle.net/79FaY/1/

Source

2010-11-21 01:35:03

Cela semble bizarre pour moi. Pourquoi utiliseriez-vous le péché pour la coordonnée x et le cos pour la coordonnée y? – cstack

Oui, vous avez raison. Le problème est avec 'atan2'. J'ai mis à jour la réponse. –

Les coordonnées de canvas HTML5 donnent des angles étranges

Répondre

Questions connexes