HTML 5 Effacement d'animation de toile 2D

J'ai suivi différents guides et j'ai le code de base pour une animation simple mais pour la vie de moi je ne peux pas réinitialiser correctement le canvas. La fonction clearRect() fonctionne parfaitement, mais lorsque j'essaie de retravailler un arc immédiatement après, il dessine à nouveau la somme de tous les chemins plutôt que de dessiner le seul segment du cercle. Est-ce que quelqu'un peut me dire ce que je fais mal ici, je sais que c'est une solution simple! En bref, je voudrais la page de test ci-dessous pour produire une sorte de segment de filature au lieu de dessiner juste un cercle:HTML 5 Effacement d'animation de toile 2D

<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> 

</head> 
<body> 
<span id="degrees_output" style="display:block;width:60px"></span> 
<button onclick="continue_animation=false;">Stop</button> 
<canvas id="myCanvas" width="578" height="200"></canvas> 
<script> 
    var degrees = 0; 
    var continue_animation = true; 
    var canvas = document.getElementById('myCanvas'); 
    var context = canvas.getContext('2d'); 
    var output = document.getElementById('degrees_output');  

    window.requestAnimFrame = (function(callback) { 
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || 
    function(callback) { 
     window.setTimeout(callback, 1000/60); 
    }; 
    })(); 

    function animate() {   
    // update 
    output.innerHTML = degrees; 

    var radians = (degrees/180) * Math.PI; 

    if (degrees >= 360) 
     degrees = 0; 
    else 
     degrees += 1; 

    // clear 
    if (degrees % 20 == 0) 
    {   
     context.clearRect(0, 0, 578, 200); 

    } 

    context.beginPath(); 

    // setup the line style  
    context.strokeStyle = '#fa00ff'; 
    context.lineWidth = 5; 
    context.lineCap = 'round'; 


    context.arc(50, 50, 20, 0, radians, false); 

    // colour the path 
    context.stroke(); 

    context.closePath();     


    // request new frame 
    requestAnimFrame(function() { 
     if (continue_animation) 
      animate(); 
    }); 
    } 
    animate(); 

</script>

Source

2013-04-15 Olly Lennox

Si vous voulez un arc de longueur fixe pour balayer autour de votre cercle, vous ll veulent spécifier le départ et les angles se terminant dans votre context.arc comme ceci:

context.arc(50, 50, 20, startRadians, radians, false);

et startRadians peuvent juste être un angle quelconque derrière votre valeur « radians »:

var startRadians= (degrees-45) * Math.PI/180;

et, Oui, vous devez effacer la toile (au moins l'arc précédent) avant de dessiner l'arc dans une nouvelle position:

context.clearRect(0,0,canvas.width,canvas.height);

Voici le code et Fiddle: http://jsfiddle.net/m1erickson/VFhzX/

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 

<style> 
    body{ background-color: ivory; } 
    canvas{border:1px solid red;} 
</style> 

<script> 
$(function(){ 

    var degrees = 0; 
    var continue_animation = true; 
    var canvas = document.getElementById('myCanvas'); 
    var context = canvas.getContext('2d'); 
    var output = document.getElementById('degrees_output');  

    window.requestAnimFrame = (function(callback) { 
     return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || 
     function(callback) { 
     window.setTimeout(callback, 1000/60); 
     }; 
    })(); 

    function animate() {   
     // update 
     output.innerHTML = degrees; 

     var radians = (degrees/180) * Math.PI; 
     var startRadians= (degrees-45) * Math.PI/180; 

     if (degrees >= 360) 
      degrees = 0; 
     else 
      degrees += 1; 

     // clear 
     if (degrees % 20 == 0) 
     {   
      context.clearRect(0, 0, 578, 200); 

     } 

     context.clearRect(0,0,canvas.width,canvas.height); 

     context.beginPath(); 

     // setup the line style  
     context.strokeStyle = '#fa00ff'; 
     context.lineWidth = 5; 
     context.lineCap = 'round'; 


     context.arc(50, 50, 20, startRadians, radians, false); 

     // colour the path 
     context.stroke(); 

     context.closePath();     


     // request new frame 
     requestAnimFrame(function() { 
      if (continue_animation) 
       animate(); 
     }); 
    } 
    animate(); 



}); // end $(function(){}); 
</script> 

</head> 

<body> 
    <span id="degrees_output" style="display:block;width:60px"></span> 
    <button onclick="continue_animation=false;">Stop</button> 
    <canvas id="myCanvas" width="578" height="200"></canvas> 
</body> 
</html>

Source

2013-04-15 18:30:41 markE

HTML 5 Effacement d'animation de toile 2D

Répondre

Questions connexes