Question

我有这个画布动画，我试图在按钮点击时停止它。因此，我需要使用cancelRAF() id调用函数requestAnimationFrame(drawCircle)。

＆＃13;

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);
}

＆＃13;

<!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>

＆＃13;

我尝试这样做，但它不起作用。

Answer 1

由于必须经常调用requestAnimationFrame来继续动画循环，因此停止动画循环的一种简单方法是退出动画循环功能而不请求另一帧。这样您就不必使用cancelAnimationFrame。

创建一个标志，指示动画是否应该继续

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

如果标志显示STOP，则返回而不执行循环代码

function drawCircle(){

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

  // do animation stuff

  // request another frame 
  requestAnimationFrame(drawCircle);

}

点击停止按钮时，只需将标志设置为停止动画

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

示例代码和演示：

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

我解决了，问题是由于错误的变量范围..

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 个答案: