1. ホーム
  2. 質問と答え
  3. ボタンをクリックしてキャンバスアニメーションを停止する

ボタンをクリックしてキャンバスアニメーションを停止する

2016-03-29 32 views
0

私はこのキャンバスアニメーションを持っており、ボタンをクリックすると停止します。そのため、私はrequestAnimationFrame(drawCircle)というIDを持つ関数cancelRAF()を呼び出す必要があります。ボタンをクリックしてキャンバスアニメーションを停止する

var mainCanvas \t \t = document.getElementById("myCanvas"); 
 
var mainContext \t = mainCanvas.getContext('2d'); 
 

 
var canvasWidth \t = mainCanvas.width; 
 
var canvasHeight \t = mainCanvas.height; 
 

 
var angle = 0; 
 

 
var cancelRAF = window.cancelAnimationFrame|| 
 
    window.webkitCancelAnimationFrame||  \t \t \t \t \t \t \t   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 { 
 
\t border: 3px #CCC solid; 
 
} 
 
</style> 
 
</head> 
 

 
<body> 
 
<div id="container"> 
 
    <canvas id="myCanvas" height="450" width="450"></canvas> 
 
</div> 
 
\t 
 
\t <input type="button" value="STOP" onclick="stop_animation()"> 
 
    
 
    <!-- SCRIPT IS LOCATED HERE --> 
 

 
</body> 
 
</html>

私はこのようにそれを試してみましたが、これは動作しません。

出典

2016-03-29 Black

答えて

1

それを解決ループは、別のフレームを要求せずにアニメーションループ機能を終了することです。この方法では、cancelAnimationFrameをまったく使用する必要はありません。フラグがSTOP、停止ボタンをクリックするとループコード

function drawCircle(){ 

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

    // do animation stuff 

    // request another frame 
    requestAnimationFrame(drawCircle); 

}

を実行せずにリターン言えばアニメーションは

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

を続けるべきかどう

を示すフラグを作成します。 、アニメーションを停止するようにフラグを設定するだけです

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

サンプルコードとデモ：

var mainCanvas \t \t = document.getElementById("myCanvas"); 
 
var mainContext \t = mainCanvas.getContext('2d'); 
 

 
var canvasWidth \t = mainCanvas.width; 
 
var canvasHeight \t = 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>

出典

2016-03-30 19:46:34 markE

+0

ニースソリューション、非常に役立ちます – Black

0

​​は常にアニメーションを停止する簡単な方法、アニメーションループを継続するために呼び出されなければならないので、私は..問題は、間違った変数のスコープであった、

var mainCanvas \t \t = document.getElementById("myCanvas"); 
 
var mainContext \t = mainCanvas.getContext('2d'); 
 

 
var canvasWidth \t = mainCanvas.width; 
 
var canvasHeight \t = 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 { 
 
\t border: 3px #CCC solid; 
 
} 
 
</style> 
 
</head> 
 

 
<body> 
 
<div id="container"> 
 
    <canvas id="myCanvas" height="450" width="450"></canvas> 
 
\t <input type="button" value="STOP" onclick="stop_animation()"> 
 
</div> 
 
</body> 
 
</html>

出典

2016-03-29 13:49:27 Black

関連する問題

 関連する問題