让“球”跟随画布上的鼠标

我试图让一个球跟随鼠标在画布区域内。但是当鼠标进入画布区域时（即边缘），球只能获得第一个位置。让“球”跟随画布上的鼠标

由于在画布内移动时球没有跟随鼠标，所以出了什么问题？

\t \t \t window.onload = startup; 
 
\t \t \t var ballX = 400; 
 
\t \t \t var ballY = 400; 
 
\t \t \t var mouseX = 0; 
 
\t \t \t var mouseY = 0; 
 
\t \t \t 
 
\t \t \t function startup() { 
 
\t \t \t \t document.getElementById("drawingArea").onmouseover = mouseMove; 
 
\t \t \t \t setInterval("moveBall()",100); 
 
\t \t \t 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t function mouseMove(evt) { 
 
\t \t \t \t mouseX = evt.clientX; 
 
\t \t \t \t mouseY = evt.clientY; 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t function moveBall() { 
 
\t \t \t \t if (ballX > mouseX) { 
 
\t \t \t \t \t ballX -= 5; 
 
\t \t \t \t } else { 
 
\t \t \t \t \t ballX += 5; 
 
\t \t \t \t } 
 
\t \t \t \t if (ballY > mouseY) { 
 
\t \t \t \t \t ballY -= 5; 
 
\t \t \t \t } else { 
 
\t \t \t \t \t ballY += 5; 
 
\t \t \t \t } 
 
\t \t \t \t 
 
\t \t \t \t var canvas = document.getElementById("drawingArea"); 
 
\t \t \t \t var ctx = canvas.getContext("2d"); 
 
\t \t \t \t 
 
\t \t \t \t ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
\t \t \t \t 
 
\t \t \t \t ctx.beginPath(); 
 
\t \t \t \t ctx.arc(ballX, ballY, 40, 0, 2* Math.PI); 
 
\t \t \t \t ctx.fillStyle = "green"; 
 
\t \t \t \t ctx.fill(); 
 
\t \t \t \t ctx.lineWidth = 5; 
 
\t \t \t \t ctx.strokeStyle = "red"; 
 
\t \t \t \t ctx.stroke(); 
 
\t \t \t }

#drawingArea 
 
{ 
 
\t \t \t \t border-style: solid; 
 
\t \t \t \t position: absolute; 
 
\t \t \t \t top: 0; 
 
\t \t \t \t left: 0; 
 
}

<!doctype html> 
 
<html> 
 
\t <head> 
 
\t \t <meta charset="UTF-8"> 
 
\t \t <title>Move Ball</title> 
 
\t </head> 
 

 
\t <body> 
 
\t \t <canvas id="drawingArea" width="800" height="800" /> 
 
\t </body> 
 
</html>

来源

2017-09-19 jhermansen

在此行中：

document.getElementById("drawingArea").onmouseover = mouseMove;

...你需要改变onmouseover到onmousemove。延伸阅读：onmousemove

完整的示例与变化：

\t \t \t window.onload = startup; 
 
\t \t \t var ballX = 400; 
 
\t \t \t var ballY = 400; 
 
\t \t \t var mouseX = 0; 
 
\t \t \t var mouseY = 0; 
 
\t \t \t 
 
\t \t \t function startup() { 
 
\t \t \t \t document.getElementById("drawingArea").onmousemove = mouseMove; 
 
\t \t \t \t setInterval("moveBall()",100); 
 
\t \t \t 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t function mouseMove(evt) { 
 
\t \t \t \t mouseX = evt.clientX; 
 
\t \t \t \t mouseY = evt.clientY; 
 
\t \t \t } 
 
\t \t \t 
 
\t \t \t function moveBall() { 
 
\t \t \t \t if (ballX > mouseX) { 
 
\t \t \t \t \t ballX -= 5; 
 
\t \t \t \t } else { 
 
\t \t \t \t \t ballX += 5; 
 
\t \t \t \t } 
 
\t \t \t \t if (ballY > mouseY) { 
 
\t \t \t \t \t ballY -= 5; 
 
\t \t \t \t } else { 
 
\t \t \t \t \t ballY += 5; 
 
\t \t \t \t } 
 
\t \t \t \t 
 
\t \t \t \t var canvas = document.getElementById("drawingArea"); 
 
\t \t \t \t var ctx = canvas.getContext("2d"); 
 
\t \t \t \t 
 
\t \t \t \t ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
\t \t \t \t 
 
\t \t \t \t ctx.beginPath(); 
 
\t \t \t \t ctx.arc(ballX, ballY, 40, 0, 2* Math.PI); 
 
\t \t \t \t ctx.fillStyle = "green"; 
 
\t \t \t \t ctx.fill(); 
 
\t \t \t \t ctx.lineWidth = 5; 
 
\t \t \t \t ctx.strokeStyle = "red"; 
 
\t \t \t \t ctx.stroke(); 
 
\t \t \t }

#drawingArea 
 
{ 
 
\t \t \t \t border-style: solid; 
 
\t \t \t \t position: absolute; 
 
\t \t \t \t top: 0; 
 
\t \t \t \t left: 0; 
 
}

<!doctype html> 
 
<html> 
 
\t <head> 
 
\t \t <meta charset="UTF-8"> 
 
\t \t <title>Move Ball</title> 
 
\t </head> 
 

 
\t <body> 
 
\t \t <canvas id="drawingArea" width="800" height="800" /> 
 
\t </body> 
 
</html>

来源

2017-09-19 05:21:29 Clonkex

您还需要添加onmousemove事件处理程序。

来源

2017-09-19 05:18:08 AKX

的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会发生什么情况，何时取消条件，...

来源

2017-09-19 06:09:18 Thomas

让“球”跟随画布上的鼠标

回答

相关问题