HTML5畫布座標給出奇怪的角度

我希望能夠在HTML5畫布上將鼠標指向鼠標。但是當我使用Math.atan2和其他trig函數時，方向會變得混亂。它以相反的方向旋轉，它通常偏離90度。HTML5畫布座標給出奇怪的角度

如果你親自看到它，可能會更容易。下面是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/

我如何可以使鼠標的方向行呢？

來源

2010-11-21 cstack

我重新檢查過，你做錯了什麼（我自己也犯過這樣的錯誤）是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/

來源

2010-11-21 01:35:03

這似乎怪我。你爲什麼要用x座標的sin和y座標的cos？ – cstack 2010-11-22 04:19:49

是的，你是對的。問題在於'atan2'。我更新了答案。 – 2010-11-22 04:29:37

HTML5畫布座標給出奇怪的角度

回答

相關問題