0

キャンバスに弾むボールを作成する小さなプログラムを作成する必要があります。ボールがバウンドするワイヤフレームを取得できますが、setTimeout をまったく起動できないようです。私は関数について読み、読み、読みましたが、これを理解できません(新規)。

<!DOCTYPE HTML>
<html>
   <head>
      <title>basic Canvas</title>
      <style>
         #canvas1{
            border:1px solid #9C9898;
         }
         body{
            margin:0px;
            padding:0px;
        }
      </style>
      <script>
         function drawMe(){
            //Set x,y,radius
            var x = 60;
            var y = 60;
            var radius = 70;
            drawLoop(x,y,radius);
         }

         function drawLoop(x,y,radius){
            var canvas2=document.getElementById("canvas1");
            var ctx=canvas2.getContext("2d");
            for(i=1;i<100;i++){

                    if(y + radius >= canvas2.height){
                        d = 1;
                    }
                    if(y - radius <= 0){
                        d = 0;
                    }
                    if (d==0){
                        x = x + 10;
                        y = y + 10;
                    }
                    else if (d==1){
                        x = x + 10;
                        y = y - 10;
                    }
                    draw(x,y,radius);
                    window.setTimeout(function() {draw(x,y,radius)},3000);
                }
         }

         function draw(x,y,radius){
                    var canvas2=document.getElementById("canvas1");
                    var ctx=canvas2.getContext("2d");

                    ctx.beginPath();
                    ctx.arc(x,y,radius,0,2*Math.PI,false);
                    var gradient = ctx.createRadialGradient(x, y, 1, x, y, radius);
                    gradient.addColorStop(0,"blue");
                    gradient.addColorStop(1,"white");
                    ctx.fillStyle=gradient;
                    ctx.lineWidth=1;
                    ctx.strokeStyle="blue";
                    ctx.fill();
                    ctx.stroke();
         }
      </script>
   </head>
   <body onload="drawMe()">
      <canvas id="canvas1" width=1000" height="400">

      </canvas>
   </body>
</html>

x、y、および半径を設定する「drawMe()」と呼ばれる小さな関数は、弾むボール (「drawLoop」) を描画する 100 回起動する小さな描画ループを呼び出します。関数 drawLoop の最後で、実際に円を描画する draw を呼び出します。私が読んだことから、行 'setTimeout(function(){draw(x,y,radius)};,3000); draw 関数を 3 秒ごとに呼び出す必要があります。しかし、そうではありません。私は一体何を間違っているのですか？

4

1 に答える 1

3

setTimeouts は、作成された時点からカウントされます。ループはほぼ瞬時に実行され、ほぼ同時に setTimeouts が作成されます。それらはすべて 3 秒後に実行されます。

これを回避する 1 つの方法は、以下のソリューションにあります。これは、現在のタイムアウトが完了するまでループをインクリメントしません。 http://jsfiddle.net/x8PWg/14/

これは、これに対する多くの潜在的な解決策の 1 つにすぎません。

于 2012-10-11T20:53:15.163 に答える