Formes de dessin sur toile en déplacement

Lorsque je l'exécute, le navigateur se charge pendant un moment, puis affiche la totalité de la zone de dessin. Comment puis-je le faire afficher dès qu'il termine une boucle d'itération? Et pourquoi ce code ne fait-il pas ce que j'attends?Formes de dessin sur toile en déplacement

Voici mon code:

for(var i=0;i<50;i++){ 
    for(var j=0;j<50;j++){ 
     ctx.beginPath(); 
     ctx.fillRect(10*j, 10*i, 10, 10); 
     ctx.fillStyle = 'rgb('+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+')'; 
     ctx.fill(); 
     ctx.closePath(); 
     sleep(10); 
    } 
    } 


function sleep(milliseconds) { 
    var start = new Date().getTime(); 
    for (var i = 0; i < 1e7; i++) { 
    if ((new Date().getTime() - start) > milliseconds){ 
     break; 
     } 
    } 
}

OK ... J'ai réussi à obtenir l'effet désiré en utilisant

window.requestAnimationFrame(draw);

quelqu'un peut cependant expliquer pourquoi s'il vous plaît le code ci-dessus se comporte comme il le fait? Pourquoi dessine-t-il toutes les 2500 formes avant d'afficher la toile?

Source

2013-04-29 Vlad Otrocol

Utilisez requestAnimationFrame

Code est ici et un Fiddle: http://jsfiddle.net/m1erickson/NRBy5/

<!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 canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 

    var RAF; 
    var i=0; 
    var j=0; 

    function animate() { 

     // draw stuff 
     ctx.beginPath(); 
     ctx.fillRect(10*j, 10*i, 10, 10); 
     ctx.fillStyle = 'rgb('+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+','+parseInt(Math.random()*255)+')'; 
     ctx.fill(); 
     ctx.closePath(); 


     // update 
     j+=1; 
     console.log(i+"/"+j); 
     if(j>=50){ 
      i+=1; 
      j=0; 
      if(i>=50){ 
       cancelAnimationFrame(RAF); 
      } 
     } 

     // request new frame 
     RAF=requestAnimationFrame(function() { animate(); }); 

    } 
    animate(); 


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

</head> 

<body> 
    <canvas id="canvas" width=300 height=300></canvas> 
</body> 
</html>

Source

2013-04-29 01:38:03 markE

Il ne tire pas comme il charge qui est le point. Je construis un raytracer et je veux afficher chaque pixel tel qu'il est calculé. Le sommeil est là pour simuler certains calculs qui ont lieu pour chaque pixel. –

Qu'est-ce qui me manque ... ** Le sommeil cause l'effet que votre question demande d'éliminer. ** Au moment où votre navigateur a fini de dormir, tous vos rectangles ont été dessinés. Le sommeil se comporte de la façon dont vous l'avez codé lorsque les couchages sont imbriqués - ils s'accumulent! Bon travail sur requestAnimationFrame, je ne faisais que coder une solution comme ça pour vous. – markE

J'ai mis la fonction de sommeil en place. J'ai imaginé que le programme ne sortirait pas de la boucle avant de terminer le sommeil. Il faut donc dessiner un carré, attendre le sommeil, dessiner le deuxième carré, attendre le sommeil. Imaginez que j'avais une boucle iterating à 10k au lieu de dormir le code devrait se comporter de la même manière. Cependant, il attendrait encore que toutes les itérations soient terminées, puis distribue toute la toile. Pourquoi ça fait ça? –

Formes de dessin sur toile en déplacement

Répondre

Questions connexes