如何在 JavaScript 中的 canvas 上停止 requestAnimationFrame

Question

小问题。在谷歌搜索如何每天 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" width="600" height="400"
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，请帮忙。

Answer 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
}

Answer 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" width="600" height="400" 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>

如何在 JavaScript 中的 canvas 上停止 requestAnimationFrame

How to stop a requestAnimationFrame on canvas in JavaScript

html

javascript

canvas

requestanimationframe