讓“球”跟隨鼠標在畫布上
[英]Make “ball” follow mouse on canvas
問題描述
我正試圖在畫布區域內制作一個跟隨鼠標的球。 但是當鼠標進入畫布區域時（例如邊緣），球只能獲得第一個位置。
有什么問題，因為球在帆布內移動時不會跟隨鼠標？
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>
3 個解決方案
解決方案1
4 2017-09-19 06:09:18
mouseover事件偵聽器不像“鼠標結束時執行此代碼”一樣工作。 它僅在此狀態為真時觸發，換句話說，當您將鼠標從外部移動到節點上時。
你想要使用的正確事件是mousemove ; 一旦更改，就存儲鼠標的新位置。
除此之外，我還對您的代碼進行了一些其他更改，以便動畫更流暢：
ballX += mouseX>ballX? 5: -5這種方法ballX += mouseX>ballX? 5: -5 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時會發生什么，刪除條件時，...
解決方案2
1 2017-09-19 05:18:08
您還需要添加onmousemove事件處理程序。
解決方案3
0 已采納 2017-09-19 05:21:29
在這一行：
document.getElementById("drawingArea").onmouseover = mouseMove;
...你需要改變onmouseover到onmousemove 。 進一步閱讀： onmousemove
更改的完整示例：
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; }
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>Move Ball</title> </head> <body> <canvas id="drawingArea" width="800" height="800" /> </body> </html>
在畫布上制作一個球慢慢向鼠標移動
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.