Jquery 什么'；下面的代码怎么了？

我想做一个矩形会移动的动画。但是，代码似乎只循环一次，而矩形是静态的。我如何解决这个问题，以及出现了什么问题

<script type="text/javascript">



            var interval = 10;
var x=0;
var y=0;
var rect = null;
var context ;

function Rectangle(x, y, width, height, borderWidth) {
this.x=x;
this.y=y;
this.width = width;
this.height = height;
this.borderWidth = borderWidth;
}


$(document).ready(function(){


        if (CheckCanvas()){

                var canvas = document.getElementById('Canvas');
                context =canvas.getContext('2d');
                $('#Result').text('Canvas supported...');
                $('#Result').text($('#Result').text()+'Sound supported...'+CheckSound());
                $('#Result').text($('#Result').text()+'Video supported...'+CheckVideo());   
                $('#Result').text($('#Result').text()+'Storage supported...'+Checkstorage());



                DrawRects();
                DrawRect();


            }
        function CheckCanvas(){
                return !!(document.createElement('canvas').getContext);

            }   

        function CheckSound(){


            return !!(document.createElement('sound').canPlayType)

            }

        function CheckVideo(){


            return !!(document.createElement('video').canPlayType)

            }

        function Checkstorage(){


            return !!(window.localStorage)

            }


        function CheckVideo(){


            return !!(document.createElement('video').canPlayType)

            }
        function DrawRect(){
            alert("Draw1");
                clearCanvas();

                updateStageObjects();

                DrawRects();
                setTimeout("DrawRect()", 5);
                alert("Draw3");

            }

        function updateStageObjects() {
            var amplitude = 150;
            var centerX = 240;  
            var nextX = myRectangle.x+ 10;

            myRectangle.x = nextX;  
        }

        function clearCanvas() {
            context.clearRect(0,0,canvas.width, canvas.height);
        }

        function DrawRects(){


                myRectangle = new Rectangle (250,70,100,50, 5);
                    context.rect(myRectangle.x,myRectangle.y,myRectangle.width,myRectangle.height);


                context.fillStyle="#8ED6FF";
                context.fill();
                context.lineWidth=myRectangle.borderWidth;
                context.strokeStyle="black"; 
                context.stroke();


            }



    })

</script>

---

问题仍然存在。

函数

DrawRect

是在

$（function（）{…}）

中定义的，但是您使用了带字符串的超时。它将在该范围之外进行

eval

ed，其中未定义

DrawRect

您应该在

$（function（）{…}）

之外定义函数，或者传递函数：

setTimeout(DrawRect, 5);

另一件事，在

DrawRect

内部调用

DrawRects

，这将创建一个具有静态坐标的新矩形。因此，矩形不会移动

第三，将

canvas

变量也移到外部

第四，你没有开始一条新的道路，所以旧的矩形仍然被画。使用

context.beginPath（）

第五，您已经定义了两次

checkVideo

---

此小提琴可以工作：.

函数

DrawRect

是在

$（函数（）{…}）

中定义的，但是可以使用带字符串的超时。它将在该范围之外进行

eval

ed，其中未定义

DrawRect

您应该在

$（function（）{…}）

之外定义函数，或者传递函数：

setTimeout(DrawRect, 5);

另一件事，在

DrawRect

内部调用

DrawRects

，这将创建一个具有静态坐标的新矩形。因此，矩形不会移动

第三，将

canvas

变量也移到外部

第四，你没有开始一条新的道路，所以旧的矩形仍然被画。使用

context.beginPath（）

第五，您已经定义了两次

checkVideo

---

此功能有效：。

函数定义必须在您尝试调用它们之前出现

在这种情况下，在你的第一部分

...
            DrawRects();
            DrawRect();
....

将调用未定义的函数

编辑：

---

将if块移到所有函数定义下面应该会有帮助

函数定义必须在尝试调用它们之前出现

在这种情况下，在你的第一部分

...
            DrawRects();
            DrawRect();
....

将调用未定义的函数

编辑：

---

将if块移动到所有函数定义下面应该会有所帮助

我已经在JSFIDLE中为您创建了一个示例，它可以工作：

将定义零件移动到普通零件上方

将DrawRect编写为匿名函数将允许更轻松的回调，如下所示：

var DrawRect = function () {
        console.log('draw');
        clearCanvas();

        updateStageObjects();

        DrawRects();
        setTimeout(DrawRect, 5);

}

---

编辑：我看到pimvdb更快了，不过您仍然可以使用JSFIDLE。

我在JSFIDLE中为您创建了一个示例，它可以工作：

将定义零件移动到普通零件上方

将DrawRect编写为匿名函数将允许更轻松的回调，如下所示：

var DrawRect = function () {
        console.log('draw');
        clearCanvas();

        updateStageObjects();

        DrawRects();
        setTimeout(DrawRect, 5);

}

---

编辑：我看到pimvdb更快了，不过您可能仍然可以使用JSFIDLE。

在测试js错误控制台时，有什么东西击中了它吗？我把代码扔进了firebug，遇到了引用错误，因为调用函数时没有定义它们（请参阅下面我和阿伦德的答案），好的，谢谢-这应该是例外的答案，kudo的见解。测试js错误控制台时有什么东西击中它吗？我把代码扔进了firebug，遇到了引用错误，因为调用它们时函数没有定义（请参见下面我和Arend的答案）好的，谢谢-我想这应该是例外答案，kudo对有见地的解释。