HTML5 tuval koordinatları garip açıları veriyor

Bir HTML5 tuvalinde fareyle ilgili bir şeyi yönlendirmek istiyorum. Ancak Math.atan2 ve diğer trig işlevlerini kullandığımda, yol tarifi berbat olur. Olması gereken ters yönde döner ve genellikle 90 derece kapalıdır.HTML5 tuval koordinatları garip açıları veriyor

Kendiniz için görürseniz muhtemelen daha kolay olacaktır. İşte javascript var:

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);

Ve burada bir HTML kodunun: http://sidefofx.com/projects/stackOverflowQuestion/

nasıl fare yönünde hat noktasını yapabilirsiniz:

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

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

Burada eylem görebilir?

kaynak

2010-11-21 cstack

Yeniden kontrol ettim ve yanlış yaptığınız şey (ve bu hatayı birkaç kez kendim yaptım) bu şekilde atan2 önce y koordinatını, sonra da x koordinatını kabul eder.

MDC söyler: bu işlev için bağımsız değişkenleri ilk Y koordinatı geçmesine ve ikinci x koordinatı

Not olduğu.

Yani

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

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

Testi güncellenmiş olmalıdır: http://jsfiddle.net/79FaY/1/

kaynak

2010-11-21 01:35:03

Bu bana garip görünüyor. Neden x koordinatı için günah kullanırsınız ve y koordinatı için uygun olur? – cstack

Evet haklısınız. Sorun 'atan2' ile. Cevabı güncelledim. –

HTML5 tuval koordinatları garip açıları veriyor

cevap

İlgili konular