单击按钮停止画布动画

Question

I have this canvas animation and I am trying to stop it on button click. 我有这个画布动画，并且我试图在单击按钮时停止它。 Therefore, I need to call the function cancelRAF() with the id of requestAnimationFrame(drawCircle) . 因此，我需要使用id为requestAnimationFrame(drawCircle)调用函数cancelRAF() requestAnimationFrame(drawCircle) 。

 var mainCanvas = document.getElementById("myCanvas"); var mainContext = mainCanvas.getContext('2d'); var canvasWidth = mainCanvas.width; var canvasHeight = mainCanvas.height; var angle = 0; var cancelRAF = window.cancelAnimationFrame|| window.webkitCancelAnimationFrame|| window.mozCancelAnimationFrame|| window.msCancelAnimationFrame; var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; function drawCircle() { mainContext.clearRect(0, 0, canvasWidth, canvasHeight); // color in the background mainContext.fillStyle = "grey"; mainContext.fillRect(0, 0, canvasWidth, canvasHeight); // draw the circle mainContext.beginPath(); var radius = 25 + 150 * Math.abs(Math.cos(angle)); mainContext.arc(225, 225, radius, 0, Math.PI * 2, false); mainContext.closePath(); // color in the circle mainContext.fillStyle = "red"; mainContext.fill(); angle += Math.PI / 64; var id = requestAnimationFrame(drawCircle); return id; } var id = drawCircle(); function stop_animation() { cancelRAF(id); }

 <!DOCTYPE html> <html lang="en-US"> <head> <title>HTML5 Canvas Example</title> <meta charset="UTF-8"> <meta name="description" content="Free Web tutorials"> <meta name="keywords" content="HTML,JavaScript"> <meta name="author" content="WebCodeGeeks.com"> <style> canvas { border: 3px #CCC solid; } </style> </head> <body> <div id="container"> <canvas id="myCanvas" height="450" width="450"></canvas> </div> <input type="button" value="STOP" onclick="stop_animation()"> <!-- SCRIPT IS LOCATED HERE --> </body> </html>

I tried to do it like this, but it does not work. 我试图这样做，但没有用。

Answer 1

Since requestAnimationFrame must be constantly called to continue the animation loop, an easy way to stop an animation loop is to exit from the animation loop function without requesting another frame. 由于必须不断调用requestAnimationFrame才能继续动画循环，因此，停止动画循环的一种简单方法是从动画循环功能退出而无需请求其他帧。 This way you don't have to use cancelAnimationFrame at all. 这样，您根本不必使用cancelAnimationFrame 。

Create a flag indicating if the animation should continue 创建一个标志，指示动画是否应该继续

// create a flag controlling if the animation will continue or stop
var continueAnimating=true;

If the flag says STOP, return without executing the loop code 如果该标志表示STOP，则返回而不执行循环代码

function drawCircle(){

  // if the continue animation flag says STOP then just return
  if(!continueAnimating){return;}

  // do animation stuff

  // request another frame 
  requestAnimationFrame(drawCircle);

}

When the stop button is clicked, just set the flag to stop animating 单击停止按钮后，只需将标志设置为停止动画即可

// set the animation flag to STOP if the stop button is clicked
document.getElementById('stopAnimating').addEventListener('click',function(){
    continueAnimating=false;
});

Example code and a Demo: 示例代码和演示：

 var mainCanvas = document.getElementById("myCanvas"); var mainContext = mainCanvas.getContext('2d'); var canvasWidth = mainCanvas.width; var canvasHeight = mainCanvas.height; var angle = 0; var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; // a flag to indicate if the animation should continue var continueAnimating=true; function drawCircle(){ // if the continue animation flag says STOP then just return if(!continueAnimating){return;} mainContext.clearRect(0, 0, canvasWidth, canvasHeight); // color in the background mainContext.fillStyle = "grey"; mainContext.fillRect(0, 0, canvasWidth, canvasHeight); // draw the circle mainContext.beginPath(); var radius = 25 + 150 * Math.abs(Math.cos(angle)); mainContext.arc(225, 225, radius, 0, Math.PI * 2, false); mainContext.closePath(); // color in the circle mainContext.fillStyle = "red"; mainContext.fill(); angle += Math.PI / 64; requestAnimationFrame(drawCircle); } drawCircle(); // set the animation flag to STOP if the stop button is clicked document.getElementById('stopAnimating').addEventListener('click',function(){ continueAnimating=false; });

 <div id="container"> <input type="button" value="STOP" id=stopAnimating> <br> <canvas id="myCanvas" height="450" width="450"></canvas> </div>

Answer 2

I solved it, the problem was because of wrong variable scopes.. 我解决了，问题是因为变量范围错误。

 var mainCanvas = document.getElementById("myCanvas"); var mainContext = mainCanvas.getContext('2d'); var canvasWidth = mainCanvas.width; var canvasHeight = mainCanvas.height; var angle = 0; var cancelRAF = window.cancelAnimationFrame|| window.webkitCancelAnimationFrame|| window.mozCancelAnimationFrame|| window.msCancelAnimationFrame; var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; var id = ""; function drawCircle() { mainContext.clearRect(0, 0, canvasWidth, canvasHeight); // color in the background mainContext.fillStyle = "grey"; mainContext.fillRect(0, 0, canvasWidth, canvasHeight); // draw the circle mainContext.beginPath(); var radius = 25 + 150 * Math.abs(Math.cos(angle)); mainContext.arc(225, 225, radius, 0, Math.PI * 2, false); mainContext.closePath(); // color in the circle mainContext.fillStyle = "red"; mainContext.fill(); angle += Math.PI / 64; id = requestAnimationFrame(drawCircle); } drawCircle(); function stop_animation() { cancelRAF(id); }

 <!DOCTYPE html> <html lang="en-US"> <head> <title>HTML5 Canvas Example</title> <meta charset="UTF-8"> <meta name="description" content="Free Web tutorials"> <meta name="keywords" content="HTML,JavaScript"> <meta name="author" content="WebCodeGeeks.com"> <style> canvas { border: 3px #CCC solid; } </style> </head> <body> <div id="container"> <canvas id="myCanvas" height="450" width="450"></canvas> <input type="button" value="STOP" onclick="stop_animation()"> </div> </body> </html>

单击按钮停止画布动画

问题描述

2 个解决方案

解决方案1
2 已采纳 2016-03-30 19:46:34

解决方案2
0 2016-03-29 13:49:27

单击按钮停止画布动画

问题描述

2 个解决方案

解决方案1 2 已采纳 2016-03-30 19:46:34

解决方案2 0 2016-03-29 13:49:27

解决方案1
2 已采纳 2016-03-30 19:46:34

解决方案2
0 2016-03-29 13:49:27