reh*_*noj 5 javascript canvas onmouseover
我试图让一个球在画布区域内跟随鼠标。但是当鼠标进入画布区域时，球只会得到第一个位置（所以在边缘上）。
由于在画布内移动时球不跟随鼠标，有什么问题？
window.onload = startup;
var ballX = 400;
var ballY = 400;
var mouseX = 0;
var mouseY = 0;
function startup() {
document.getElementById("drawingArea").onmouseover = mouseMove;
setInterval("moveBall()",100);
}
function mouseMove(evt) {
mouseX = evt.clientX;
mouseY = evt.clientY;
}
function moveBall() {
if (ballX > mouseX) {
ballX -= 5;
} else {
ballX += 5;
}
if (ballY > mouseY) {
ballY -= 5;
} else {
ballY += 5;
}
var canvas = document.getElementById("drawingArea");
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.arc(ballX, ballY, 40, 0, 2* Math.PI);
ctx.fillStyle = "green";
ctx.fill();
ctx.lineWidth = 5;
ctx.strokeStyle = "red";
ctx.stroke();
}#drawingArea
{
border-style: solid;
position: absolute;
top: 0;
left: 0;
}<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Move Ball</title>
</head>
<body>
<canvas id="drawingArea" width="800" height="800" />
</body>
</html>该mouseover事件监听器不工作像“而鼠标悬停，执行该代码”。它仅在此状态为真时触发，换句话说，当您将鼠标从外部移动到节点上时。
您想要使用的正确事件是mousemove; 存储鼠标的新位置，一旦它改变。
除此之外，我还对您的代码进行了一些其他更改，使动画更加流畅：
这种方法ballX += mouseX>ballX? 5: -5容易出现卡顿，因为当鼠标和球在任何轴上的距离小于 5px 时，它会完全忽略该区域。
也不要setInterval()用于您的游戏循环。更广泛地说，不要使用setTimeout()或setInterval()使用字符串参数（根本）。这是一个不好的做法。不灵活，并迫使您使用全局变量。
更好地使用，requestAnimationFrame()以便您与浏览器渲染保持同步。
window.onload = startup;
var ballX = 400;
var ballY = 400;
var mouseX = 0;
var mouseY = 0;
function startup() {
//`mousemove`, not `mouseover`
document.getElementById("drawingArea").onmousemove = mouseMove;
loop();
}
//use `requestAnimationFrame` for the game loop
//so you stay sync with the browsers rendering
//makes it a smoother animation
function loop(){
moveBall();
requestAnimationFrame(loop);
}
function mouseMove(evt) {
mouseX = evt.clientX;
mouseY = evt.clientY;
}
function moveBall() {
//get the distance between the mouse and the ball on both axes
//walk only the an eight of the distance to create a smooth fadeout
var dx = (mouseX - ballX) * .125;
var dy = (mouseY - ballY) * .125;
//calculate the distance this would move ...
var distance = Math.sqrt(dx*dx + dy*dy);
//... and cap it at 5px
if(distance > 5){
dx *= 5/distance;
dy *= 5/distance;
}
//now move
ballX += dx;
ballY += dy;
var canvas = document.getElementById("drawingArea");
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.arc(ballX, ballY, 40, 0, 2 * Math.PI);
ctx.fillStyle = "green";
ctx.fill();
ctx.lineWidth = 5;
ctx.strokeStyle = "red";
ctx.stroke();
}#drawingArea {
border-style: solid;
position: absolute;
top: 0;
left: 0;
}<canvas id="drawingArea" width="800" height="800" />随意玩一下运动代码。看看，当你改变* .125计算距离时会发生什么，移除条件时，......
在这一行：
document.getElementById("drawingArea").onmouseover = mouseMove;
...您需要更改onmouseover为onmousemove. 进一步阅读：onmousemove
更改的完整示例：
document.getElementById("drawingArea").onmouseover = mouseMove;
window.onload = startup;
var ballX = 400;
var ballY = 400;
var mouseX = 0;
var mouseY = 0;
function startup() {
document.getElementById("drawingArea").onmousemove = mouseMove;
setInterval("moveBall()",100);
}
function mouseMove(evt) {
mouseX = evt.clientX;
mouseY = evt.clientY;
}
function moveBall() {
if (ballX > mouseX) {
ballX -= 5;
} else {
ballX += 5;
}
if (ballY > mouseY) {
ballY -= 5;
} else {
ballY += 5;
}
var canvas = document.getElementById("drawingArea");
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.arc(ballX, ballY, 40, 0, 2* Math.PI);
ctx.fillStyle = "green";
ctx.fill();
ctx.lineWidth = 5;
ctx.strokeStyle = "red";
ctx.stroke();
}#drawingArea
{
border-style: solid;
position: absolute;
top: 0;
left: 0;
}