以下代碼有什麼問題？

我想做一個矩形可以移動的動畫。但是，代碼似乎只循環一次，矩形是靜態的。我該如何解決這個問題，怎麼了？以下代碼有什麼問題？

<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

以下代碼有什麼問題？

回答

相關問題