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画布坐标给出奇怪的角度

回答

相关问题