Tuval animasyonunu durdurma düğmesi üzerinde tıklayın

Bu tuval animasyonunu kullanıyorum ve düğmeyi tıklatmamaya çalışıyorum. Bunun için requestAnimationFrame(drawCircle) kimliğiyle cancelRAF() işlevini çağırmam gerekiyor. Tuval animasyonunu durdurma düğmesi üzerinde tıklayın

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>

ben böyle çalıştı, ancak bu çalışmıyor.

kaynak

2016-03-29 Black

sürekli animasyon döngü, bir animasyon durdurmak için kolay bir yol devam etmek çağrılmalıdır .. çünkü yanlış değişken kapsamları oldu döngü, başka bir çerçeve talep etmeden animasyon döngüsü işlevinden çıkmaktır. Bu şekilde cancelAnimationFrame'u kullanmanız gerekmez. bayrak DUR, durdurma düğmesine tıklandığında döngü kodunu

function drawCircle(){ 

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

    // do animation stuff 

    // request another frame 
    requestAnimationFrame(drawCircle); 

}

yürütme olmadan iade diyorsa animasyon

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

sürdürmesi konusunda

belirten bir bayrak oluşturma , sadece animasyonu etkinleştirmek için bayrağı ayarladıktan sonra

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

Örnek kod ve Demo:

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>

kaynak

2016-03-30 19:46:34 markE

Güzel çözüm, çok yararlı – Black

ben onu çözdüm, sorun requestAnimationFrame yana

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>

kaynak

2016-03-29 13:49:27 Black

Tuval animasyonunu durdurma düğmesi üzerinde tıklayın

cevap

İlgili konular