我有这个 Canvas 动画，我试图在单击按钮时停止它。因此，我需要使用 requestAnimationFrame(drawCircle) 的 id 调用函数 cancelRAF()。
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>我尝试这样做，但它不起作用。
最佳答案
由于必须不断调用 requestAnimationFrame 才能继续动画循环，因此停止动画循环的一个简单方法是退出动画循环函数而不请求另一帧。这样您就根本不必使用 cancelAnimationFrame。
创建一个标志来指示动画是否应继续
// create a flag controlling if the animation will continue or stop
var continueAnimating=true;
如果标志显示“停止”，则返回而不执行循环代码
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>关于javascript - 单击按钮时停止 Canvas 动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36285704/