我正在创建这个简单的程序，我刚刚开始研究JavaScript。所以这是我的代码
<!DOCTYPE html>
<html>
<head>
<title>Canvas Test</title>
</head>
<body>
<section>
<div>
<canvas id="canvas" width="500" height="500">
</canvas>
</div>
<script type="text/javascript">
var canvas;
var ctx;
var x = 400;
var y = 300;
var dx = 2;
var dy = 4;
var a = 100;
var b = 200;
var da = 3;
var db = 5;
var WIDTH = 500;
var HEIGHT = 500;
function circle(x,y,r) {
ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI*2, true);
ctx.fill();
}
function rect(x,y,w,h) {
ctx.beginPath();
ctx.rect(x,y,w,h);
ctx.closePath();
ctx.fill();
}
function clear() {
ctx.clearRect(0, 0, WIDTH, HEIGHT);
}
function init() {
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
return setInterval(draw, 10);
}
var c = Math.floor((Math.random()*WIDTH)+1);
var d = Math.floor((Math.random()*WIDTH)+1);
var e = Math.floor((Math.random()*WIDTH)+1);
var f = Math.floor((Math.random()*WIDTH)+1);
var g = Math.floor((Math.random()*WIDTH)+1);
var h = Math.floor((Math.random()*WIDTH)+1);
var dc = Math.floor((Math.random()*6)+1);
var dd = Math.floor((Math.random()*8)+1);
var de = Math.floor((Math.random()*7)+1);
var df = Math.floor((Math.random()*5)+1);
var dg = Math.floor((Math.random()*6)+1);
var dh = Math.floor((Math.random()*4)+1);
var enTimer = null;
function draw() {
clearInterval(enTimer);
ctx.fillStyle = "#FAF7F8";
rect(0,0,WIDTH,HEIGHT);
ctx.fillStyle = "#F00";
circle(x, y, 10);
ctx.fillStyle = "#0772A1";
circle(a, d, 20);
ctx.fillStyle = "#00BB3F";
circle(a, b, 30);
ctx.fillStyle = "#FB0";
circle(c, d, 15);
ctx.fillStyle = "#E7003E";
circle(c, y, 25);
ctx.fillStyle = "#FF7400";
circle(e, f, 10);
ctx.fillStyle = "#98ED00";
circle(g, h, 25);
ctx.fillStyle = "#3016B0";
circle(e, h, 30);
ctx.fillStyle = "#8C04A8";
circle(g, f, 15);
ctx.fillStyle = "#009D91";
circle(x, f, 30);
if (x + dx > WIDTH || x + dx < 0)
dx = -dx;
if (y + dy > HEIGHT || y + dy < 0)
dy = -dy;
if (a + da > WIDTH || a + da < 0)
da = -da;
if (b + db > HEIGHT || b + db < 0)
db = -db;
if (c + dc > WIDTH || c + dc < 0)
dc = -dc;
if (d + dd > HEIGHT || d + dd < 0)
dd = -dd;
if (e + de > WIDTH || e + de < 0)
de = -de;
if (f + df > HEIGHT || f + df < 0)
df = -df;
if (g + dg > WIDTH || g + dg < 0)
dg = -dg;
if (h + db > HEIGHT || h + db < 0)
dh = -dh;
/*
if(ctx.onmouseover = 1){
x += 0;
y += 0;
a += 0;
b += 0;
c += 0;
d += 0;
e += 0;
f += 0;
g += 0;
h += 0;
}
else if(ctx.onmouseout = 0){*/
x += dx;
y += dy;
a += da;
b += db;
c += dc;
d += dd;
e += de;
f += df;
g += dg;
h += dh;
//}
var interval = getRand(200000, 000);
enTimer = setInterval(addEnemy, interval);
}
init();
function pause() {
clearInterval(enTimer);
ctx.fillStyle = "#FAF7F8";
rect(0,0,WIDTH,HEIGHT);
ctx.fillStyle = "#F00";
circle(x, y, 10);
ctx.fillStyle = "#0772A1";
circle(a, d, 20);
ctx.fillStyle = "#00BB3F";
circle(a, b, 30);
ctx.fillStyle = "#FB0";
circle(c, d, 15);
ctx.fillStyle = "#E7003E";
circle(c, y, 25);
ctx.fillStyle = "#FF7400";
circle(e, f, 10);
ctx.fillStyle = "#98ED00";
circle(g, h, 25);
ctx.fillStyle = "#3016B0";
circle(e, h, 30);
ctx.fillStyle = "#8C04A8";
circle(g, f, 15);
ctx.fillStyle = "#009D91";
circle(x, f, 30);
if (x + dx > WIDTH || x + dx < 0)
dx = -dx;
if (y + dy > HEIGHT || y + dy < 0)
dy = -dy;
if (a + da > WIDTH || a + da < 0)
da = -da;
if (b + db > HEIGHT || b + db < 0)
db = -db;
if (c + dc > WIDTH || c + dc < 0)
dc = -dc;
if (d + dd > HEIGHT || d + dd < 0)
dd = -dd;
if (e + de > WIDTH || e + de < 0)
de = -de;
if (f + df > HEIGHT || f + df < 0)
df = -df;
if (g + dg > WIDTH || g + dg < 0)
dg = -dg;
if (h + db > HEIGHT || h + db < 0)
dh = -dh;
x += 0;
y += 0;
a += 0;
b += 0;
c += 0;
d += 0;
e += 0;
f += 0;
g += 0;
h += 0;
var interval = getRand(200000, 000);
enTimer = setInterval(addEnemy, interval);
}
</script>
</section>
</body>
</html>
我想要的是，当我悬停画布时动画将停止，当我徘徊动画将播放时，我尝试将onmouseover和onmouseout放在一起但是它不起作用
P.S仅使用javascript，没有像jquery这样的库
答案 0 :(得分：1)
你几乎拥有它......
确保init（）中的计时器是公开的：
function init() {
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
enTimer=setInterval(draw, 10);
}
添加一些在鼠标悬停时终止计时器的事件侦听器，并在mouseout上创建一个新计时器：
// listen for mouseover on the canvas
canvas.addEventListener("mouseover",doMouseOver,false);
// listen for mouseout from the canvas
canvas.addEventListener("mouseout",doMouseOut,false);
// on mouseover, clear the timer
function doMouseOver(){
clearInterval(enTimer);
}
// on mouseout, start another timer
function doMouseOut(){
var interval = getRand(200000, 000); // or make interval public to make it reusable
enTimer = setInterval(addEnemy, interval);
}