单击按钮停止画布动画
[英]Stop canvas animation on button click
问题描述
我有这个画布动画，并且我试图在单击按钮时停止它。 因此，我需要使用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>
我试图这样做，但没有用。
2 个解决方案
解决方案1
2 已采纳 2016-03-30 19:46:34
由于必须不断调用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>
解决方案2
0 2016-03-29 13:49:27
我解决了，问题是因为变量范围错误。
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>
如何在5秒后停止此画布动画绘制新粒子并在点击时从零粒子重新启动它？
[英]How can I stop this canvas animation drawing new particles after 5 seconds and restart it from zero particles on click?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.