jquery - 下面的代码有什么问题吗？

Question

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

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

////html/////

 <canvas id="Canvas" width="800px" height="800px"> Nor supported</canvas>

编辑版本

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


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();


            }


        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)

            }



$(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();


            }
    })

问题仍然存在..

Answer 1

函数 DrawRect 是在 $(function() {...}) 中定义的，但您对字符串使用超时。它将在该范围之外进行eval评估，其中DrawRect未定义。

您应该在 $(function() {...}) 之外定义函数，或者传递一个函数:

setTimeout(DrawRect, 5);

另一件事，您在DrawRect内部调用DrawRects，它创建一个具有静态坐标的新矩形。结果，矩形没有移动。

第三，将 canvas 变量也移到外面。

第四，您没有开始新的路径，因此旧的矩形仍然会被绘制。使用context.beginPath()。

第五，您定义了两次 checkVideo。

这个 fiddle 有效:http://jsfiddle.net/uZS3g/6/ .