Javascript 如何持续更新这些坐标？

我想水平移动矩形，但是，它多次进入updatesAgeobjects（）函数，但不更新myRectangle.x的值。如何解决此问题

 <script type="text/javascript">
            var interval = 10;
            var x=0;
            var y=0;
            var myRectangle;
            var context ;
            var canvas;
        function Rectangle(x, y, width, height, borderWidth) {
                this.x=x;
                this.y=y;
                this.width = width;
                this.height = height;
                this.borderWidth = borderWidth;
            }
        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 updateStageObjects() {
                var amplitude = 150;
                var centerX = 240;  
                myRectangle.x += 100;
    alert(myRectangle.x+"   "+myRectangle.y);                   
            }    
            function clearCanvas() {                
                context.clearRect(0,0,canvas.width, canvas.height); 
            }

            function DrawRect(){

                setTimeout(CheckCanvas,10);
                clearCanvas();
                updateStageObjects();
                DrawRects();
            }   
        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 DrawCanvas(){
            if (CheckCanvas()){
                canvas = document.getElementById('Canvas');
                DrawRects();
                setInterval(DrawRect, 10);      
            }
    }
</script>

var区间=10；
var x=0；
var y=0；
var-myRectangle；
var语境；
var帆布；
函数矩形（x、y、宽度、高度、边框宽度）{
这个.x=x；
这个。y=y；
这个。宽度=宽度；
高度=高度；
this.borderWidth=borderWidth；
}
函数DrawRects（）{
myRectangle=新矩形（250,70100,50,5）；context.rect（myRectangle.x，myRectangle.y，myRectangle.width，myRectangle.height）；
context.fillStyle=“#8ED6FF”；
context.fill（）；
context.lineWidth=myRectangle.borderWidth；
context.strokeStyle=“black”；
stroke（）；
}
函数updateStateObjects（）{
var振幅=150；
var centerX=240；
myRectangle.x+=100；
警报（myRectangle.x+“”+myRectangle.y）；
}    
函数clearCanvas（）{
clearRect（0,0，canvas.width，canvas.height）；
}
函数DrawRect（）{
设置超时（检查画布，10）；
clearCanvas（）；
updateStageObjects（）；
DrawRects（）；
}   
函数CheckCanvas（）{
return！！（document.createElement（'canvas'）.getContext）；
}   
函数CheckSound（）{
return！！（document.createElement（'sound'）.canPlayType）
}
函数CheckVideo（）{
return！！（document.createElement（'video'）.canPlayType）
}
函数Checkstorage（）{
return！！（window.localStorage）
}
函数CheckVideo（）{
return！！（document.createElement（'video'）.canPlayType）
}
函数DrawCanvas（）{
if（CheckCanvas（））{
canvas=document.getElementById（'canvas'）；
DrawRects（）；
设置间隔（DrawRect，10）；
}
}

html

不受支持

每次调用

updateStateObjects（）

，后面都会立即调用

DrawRects（）

，这会在

（250,70100,50,5）

的正位置创建一个新矩形。所以你永远不会注意到它增加了100

---

如果您想让其中一个函数记住在另一个函数中所做的更改，则需要在这些函数之间来回传递一些数字。

每次调用

updatesAgoObjects（）

，之后会立即调用

DrawRects（）

，这将在

（250,70100,50,5）

处创建一个新的矩形。所以你永远不会注意到它增加了100

---

如果希望其中一个函数记住另一个函数中所做的更改，则需要在这些函数之间来回传递一些数字。

正如Chris指出的，DrawRects（）总是绘制相同的单词，请尝试添加更多变量，如

var dx = 250;
var dy = 70;

然后将

新矩形

更改为

myRectangle = new Rectangle (dx,dy,100,50, 5);

下一步将

myRectangle.x+=100

行更改为

dx += 100;

---

希望这能有所帮助。

正如Chris指出的，您的DrawRects（）总是绘制相同的单词，请尝试添加更多变量，如

var dx = 250;
var dy = 70;

然后将

新矩形

更改为

myRectangle = new Rectangle (dx,dy,100,50, 5);

下一步将

myRectangle.x+=100

行更改为

dx += 100;

---

希望这有帮助。

为什么代码中有这么多空行？还有不必要的缩进@Vimal-请在代码中使用而不是警报。为什么代码中有这么多空行？还有不必要的缩进@Vimal-请在代码中使用而不是使用警报。