HTML5 画布坐标给出了奇怪的角度
我希望能够在 HTML5 画布上将某些东西定向到鼠标。但是当我使用 Math.atan2 和其他三角函数时，方向会变得混乱。它以与应有的方向相反的方向旋转，并且通常偏离 90 度。
如果您亲自看看，可能会更容易。这是 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/
如何使线条指向鼠标方向？
I want to be able to orient something toward the mouse on an HTML5 canvas. But when I use Math.atan2 and the other trig functions, the directions get messed up. It rotates in the opposite direction that it should and it's usually off by 90 degrees.
It will probably be easier if you see it for yourself. Here's the 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 );
And here's the HTML:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<canvas id='world'></canvas>
<script type="text/javascript" src="test.js"></script>
</body>
</html>
You can see it in action here: http://sidefofx.com/projects/stackOverflowQuestion/
How can I make the line point in the direction of the mouse?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我重新检查了一下，你做错了什么（我自己也犯过几次这个错误）是 atan2 首先接受 y 坐标，然后是 x 坐标。
MDC 说：
所以
应该
测试更新： http://jsfiddle.net/79FaY/1/
I rechecked and what you're doing wrong (and I've done this error a few times myself) is that atan2 accepts first the y coordinate, then the x coordinate.
MDC says:
So
should be
Test updated: http://jsfiddle.net/79FaY/1/