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

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

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

第四，你没有开始新的路径，所以旧的矩形仍然被绘制。使用context.beginPath()。

很快，您checkVideo定义了两次。

这个小提琴起作用：http://jsfiddle.net/uZS3g/6/。

Answer 2

我在jsFiddle中为你创建了一个样本：

http://jsfiddle.net/uZS3g/4/

将定义部分移到正常部分上方

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

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

        updateStageObjects();

        DrawRects();
        setTimeout(DrawRect, 5);

}

编辑：我看到pimvdb更快，你仍然可以玩jsfiddle。

Answer 3

在尝试调用函数定义之前必须先进行函数定义。

在本案例的第一部分

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

将调用未定义的函数

编辑：

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

以下代码有什么问题？

3 个答案: