以下代码有什么问题？

我想做一个矩形可以移动的动画。但是，代码似乎只循环一次，矩形是静态的。我该如何解决这个问题，怎么了？以下代码有什么问题？

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


      } 
    })

问题仍然存在..

来源

2011-06-25 Vimal Basdeo

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

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

移动定义部分高于正常部分

写作的drawRect作为一个匿名函数将允许更容易回调，像这样：

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

     updateStageObjects(); 

     DrawRects(); 
     setTimeout(DrawRect, 5); 

}

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

来源

2011-06-25 14:48:49 Arend

功能DrawRect在$(function() {...})内限定，但是你用一个字符串超时。在该范围之外将会是eval，其中DrawRect未被定义。

应定义功能$(function() {...})外面，而不是，或传递函数：

setTimeout(DrawRect, 5);

另一件事，你叫DrawRects内DrawRect，创建静态坐标一个新的矩形。结果，矩形不移动。

第三，在外面也移动canvas变量。

第四，你不开始一个新的路径，所以旧的矩形仍然画。使用context.beginPath()。

五十，你有checkVideo定义两次。

这小提琴的作品：http://jsfiddle.net/uZS3g/6/。

来源

2011-06-25 14:45:08 pimvdb

+1。好的赶上！ –

我改变了它，因为你说这个问题仍然存在.. –

测试它时，有什么东西碰到你的js错误控制台吗？我把代码扔进了firebug中，并且遇到了引用错误，因为当你调用它们时函数没有被定义（请参阅下面的mine和Arend的回答） –

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

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

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

会打电话的未定义功能

编辑：

移动你若跌破所有的函数定义块应该帮助

来源

2011-06-25 14:46:36

以下代码有什么问题？

回答

相关问题