Question

我在使用javascript setTimeout（）函数时遇到了一些问题。基本上我想增加一个矩形的大小，直到它达到画布的最大高度或宽度，然后将其宽度和高度重置为0并保持循环。

我可能遇到的主要问题是if else语句，其他似乎永远不会被调用，这对我来说毫无意义。我已经尝试将else更改为if if如果高度/宽度等于或超过画布高度/宽度以将高度/宽度设置为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并在无限循环中重新开始整个过程，但它不是出于某种原因。

Answer 1

你必须记住你的画布没有在你的每个drawMe调用之间被清除 - 因此，在正确调整宽度和高度的同时，在第一个循环之后整个区域被抽出，因此看起来没有任何事情发生。

添加简单的清除填充可以解决问题。

小提琴here！ http://jsfiddle.net/YAJnk/

使用setTimeout（）循环，使矩形更大，直到它到达画布边缘，然后重置

1 个答案: