單擊按鈕停止畫布動畫
[英]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.