0

javascript の setTimeout() 関数を使用する際に問題が発生しています。基本的に、キャンバスの最大の高さまたは幅に達するまで長方形のサイズを大きくし、幅と高さを 0 にリセットしてループを続けたいと考えています。

おそらく私が抱えている主な問題は if else ステートメントにあります.elseはどういうわけか決して呼び出されないようです.これは私には意味がありません. 高さ/幅がキャンバスの高さ/幅以上であるかどうかを示すifにelseを変更して、高さ/幅を0に設定しようとしましたが、それもうまくいきませんでした。

ここに私が持っているコードがあります:

<!DOCTYPE HTML>
<html>
    <head>
        <title>A Canvas</title>
        <style>
            canvas{border:20px solid black;}
        </style>

        <script>
            function drawMe()
            {
                var canvas2=document.getElementById("canvas1");
                var ctx = canvas2.getContext("2d");             

                width = 0;
                height = 0;

                draw(ctx, width, height);
            }

            function draw(ctx, width, height)
            {
                ctx.beginPath();
                ctx.fillStyle="#839402";
                ctx.fillRect(0,0,width,height);
                if (width < 900 && height < 500)
                {
                    width += 9;
                    height += 5;
                }
                else
                {
                    width = 0;
                    height = 0;
                }
                setTimeout(function() {draw(ctx, width, height)}, 20);
            }
        </script>
    </head>
    <body onload="drawMe();">
        <canvas id="canvas1" width="900" height="500">
            <!-- Stuff goes here -->
        </canvas>
    </body>
</html>

追加情報:

四角形は適切に成長しており、四角形がキャンバスの端に達するまで、すべてが完全に正常に見えます。その時点で、長方形は単純に成長を停止し、他には何も起こりません。長方形の高さと幅を 0 にリセットし、プロセス全体を無限ループでやり直す必要がありますが、何らかの理由でそうしません。

4

1 に答える 1

1

drawMe 呼び出しごとにキャンバスがクリアされないことを覚えておく必要があります。そのため、幅と高さは適切に調整されますが、最初のループの後、領域全体が描画されるため、何も起こっていないように見えます。

シンプルなクリア フィルを追加すると、問題が解決します。

フィドルhere！http://jsfiddle.net/YAJnk/

于 2013-10-22T17:05:05.420 に答える