如何在 JavaScript 中停止画布上的 requestAnimationFrame [重复]
Posted
技术标签:
【中文标题】如何在 JavaScript 中停止画布上的 requestAnimationFrame [重复]【英文标题】：How to stop a requestAnimationFrame on canvas in JavaScript [duplicate] 【发布时间】：2021-09-09 14:08:12 【问题描述】：小问题。在谷歌搜索如何每天 8 小时执行此操作后，什么都没有。请让我知道如何停止requestAnimationFrame：简单地说，只是暂时暂停动画：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" />
<head>
<title>Parking Master LVL. 1</title>
</head>
<body>
<h3 id="header-style">Parking Master</h3>
<p class="paraGraph1">How to play:</p>
<ol id="directions">
<p>1. drive into the Green Outlined Square</p>
<p>2. do not crash through the process or the game ends!</p>
<p>3. press "<span><button style="position: relative;
top: -3px;
color: #11fc05;
border: 2px double #11fc05; width: 1.2em; height: 1.2em;"><span style="position: absolute; left: 4px;top: 0px; font-size: 0.6em;">Park</span></button></span>" when you parked in the correct spot.</p>
</ol>
</body>
<link rel="stylesheet" href="style.css">
<!--Game-->
<canvas id="myCanvas"
style="border:2px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<button style="position:absolute;left:550px;top:600px;" class="buttonDrive" onmousedown="mouseDown()" onmouseup="mouseUp()">Drive</button>
<button class="buttonPark" onclick="parkDetector()" style="position: absolute;left: 550px; top: 540px;"><strong>Park</strong></button>
<div id="Car-Body">
<script>
var canvas = document.getElementById('myCanvas'),
ctx = canvas.getContext('2d'),
x = 0,
last = performance.now();
function draw(timestamp)
requestAnimationFrame(draw);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.rect(x, 20, 20, 20);
ctx.fillStyle = "#000000";
ctx.fill();
x += (timestamp - last) / 10;
last = timestamp;
</script>
</div>
<script>
var continueAnimating=true;
var carBody = document.getElementById("Car-Body");
// detect if car is parked
function parkDetector()
if (carBody > 0)
// If the car Parked in the correct spot
carIsParked();
// If the car is not parked in the correct spot
if (carBody < 176)
function carIsNotParked()
alert("Hmm... it doesn't seem like you parked!");
function carIsParked()
alert("You Parked!");
document.body.innerhtml+=p;
document.body.innerHTML+='<button onclick="nextLevel()">Next Level</button>';
// Direct the car
var p = '<div></div>';
// Redirect to Next Level
function nextLevel()
document.getElementsByClassName().innerHTML = '<a href="https://sites.google.com/view/parking-master-lvl2">Next Level</a>';
function mouseUp()
console.log('wow'); // if the "Drive" button is let go of, cancel the animation
function mouseDown()
requestAnimationFrame(draw); // if "Drive" is pressed, draw the animation
</script>
基本上当mouseDown起作用时，它应该触发requestAnimationFrame，它确实如此，但是当mouseUp事件被触发时，它应该停止动画。我是 javascript 新手，从来没有做过 jQuery，请帮忙。
【问题讨论】：
【参考方案1】：您可以像这样更改这些功能：
var shouldDraw=false //Defines a new variable that will allow to draw or not
function draw(timestamp)
if(!shouldDraw) return //Test if you should draw or not, if it is equal to true, the draw function continues as it should, otherwise it stops and isn't called again
requestAnimationFrame(draw);
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
//The rest of your function...
function mouseUp()
console.log('wow'); // if the "Drive" button is let go of, cancel the animation
shouldDraw=false //Says that you don't draw anymore
function mouseDown()
shouldDraw=true //Says that you can draw now
requestAnimationFrame(draw); // if "Drive" is pressed, draw the animation
【讨论】：
【参考方案2】：您可以使用cancelAnimationFrame() 来停止动画。您可以将requestAnimationFrame() 分配给一个变量，然后在取消函数中停止动画调用该变量。您也不需要在 mouseDown 函数中调用 requestAnimationFrame()，因为只需调用 draw() 就会触发它被激活。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width" />
<head>
<title>Parking Master LVL. 1</title>
</head>
<body>
<h3 id="header-style">Parking Master</h3>
<p class="paraGraph1">How to play:</p>
<ol id="directions">
<p>1. drive into the Green Outlined Square</p>
<p>2. do not crash through the process or the game ends!</p>
<p>3. press "<span><button style="position: relative;
top: -3px;
color: #11fc05;
border: 2px double #11fc05; width: 1.2em; height: 1.2em;"><span style="position: absolute; left: 4px;top: 0px; font-size: 0.6em;">Park</span></button></span>" when you parked in the correct spot.</p>
</ol>
</body>
<link rel="stylesheet" href="style.css">
<!--Game-->
<canvas id="myCanvas" style="border:2px solid #c3c3c3;">
Your browser does not support the canvas element.
</canvas>
<button style="position:absolute;left:550px;top:600px;" class="buttonDrive" onmousedown="mouseDown()" onmouseup="mouseUp()">Drive</button>
<button class="buttonPark" onclick="parkDetector()" style="position: absolute;left: 550px; top: 540px;"><strong>Park</strong></button>
<div id="Car-Body">
<script>
var canvas = document.getElementById('myCanvas'),
ctx = canvas.getContext('2d'),
x = 0,
last = performance.now(),
animate;
function draw()
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
ctx.rect(x, 20, 20, 20);
ctx.fillStyle = "#000000";
ctx.fill();
x += 0.5;
animate = requestAnimationFrame(draw);
</script>
</div>
<script>
var continueAnimating = true;
var carBody = document.getElementById("Car-Body");
// detect if car is parked
function parkDetector()
if (carBody > 0)
// If the car Parked in the correct spot
carIsParked();
// If the car is not parked in the correct spot
if (carBody < 176)
function carIsNotParked()
alert("Hmm... it doesn't seem like you parked!");
function carIsParked()
alert("You Parked!");
document.body.innerHTML += p;
document.body.innerHTML += '<button onclick="nextLevel()">Next Level</button>';
// Direct the car
var p = '<div></div>';
// Redirect to Next Level
function nextLevel()
document.getElementsByClassName().innerHTML = '<a href="https://sites.google.com/view/parking-master-lvl2">Next Level</a>';
function mouseUp()
console.log('wow');
cancelAnimationFrame(animate) // if the "Drive" button is let go of, cancel the animation
function mouseDown()
draw();
// if "Drive" is pressed, draw the animation
</script>【讨论】：
7-16-21 更新：再次感谢！现在我有一个很棒的完全开发的网页游戏你可以玩here.以上是关于如何在 JavaScript 中停止画布上的 requestAnimationFrame [重复]的主要内容，如果未能解决你的问题，请参考以下文章