Question

当我运行它时，浏览器会加载一段时间，然后显示整个画布。如何在完成一次循环迭代后立即显示它？为什么这段代码没有按照我的预期进行操作？

这是我的代码：

  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;
      }
   }
 }

好的......我设法使用

达到了预期的效果

window.requestAnimationFrame(draw);

但是有人可以解释一下为什么上面的代码行为方式呢？为什么它在显示画布之前绘制所有2500个形状？

Answer 1

使用requestAnimationFrame

这是代码和小提琴：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>

Canvas在旅途中绘制形状

1 个答案: