制作“球"在画布上跟随鼠标 [英] Make "ball" follow mouse on canvas
本文介绍了制作“球"在画布上跟随鼠标的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使一个球跟随鼠标在画布区域内移动.但是，只有当鼠标进入画布区域(边缘)时，球才会到达第一个位置.
I'm trying to make a ball follow the mouse around inside a canvas area. But the ball only get the first position when mouse enter the canvas area (so on the edges).
这是怎么回事，因为在画布内移动时，球没有跟随鼠标?
What is wrong since the ball doesn't follow mouse when moving around inside 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>
推荐答案
在此行:
document.getElementById("drawingArea").onmouseover = mouseMove;
...您需要将onmouseover更改为onmousemove.进一步阅读: onmousemove
...you need to change onmouseover to onmousemove. Further reading: 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>
这篇关于制作“球"在画布上跟随鼠标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
