在javascript中創建動畫循環（canvas）

我做了一個繪製40個矩形的循環，它們都需要有高度：400px;但我想從高處開始：0;和動畫到400這是我的代碼：在javascript中創建動畫循環（canvas）

function draw(){ 

    height += 5; 
     if(height > 1){ 
      for (var i = 0; i < dataSales.length; i++) { 

        geel += 6; 
        blauw += 6; 
        groen -= 6; 
        xPos += 23; 
        ctx.beginPath(); 
        ctx.fillStyle= "#89C349"; 
        ctx.rect(xPos,595,20,-height); 
        ctx.fill(); 
      } 
     } 
    window.requestAnimationFrame(draw); 
    }

來源

2015-05-14 user3441089

最新問題？什麼部分是/不工作？你需要什麼幫助？ – atmd

如果我做日誌，我可以看到我的身高正在上升，但是我的矩形只是在5px高度處繪製並停下來。 – user3441089

你能顯示完整的代碼嗎？或更好，但在jsfiddle重新創建？ – atmd

的問題是，第二次draw被調用，xPos = 907，第三次draw被稱爲xPos = 1804等

你想xPos，geel ，blauw和groen都被定義爲裏面的draw這樣它們每次都會重置。這是一個fiddle。

來源

2015-05-14 14:43:08 JosiahDaniels

非常感謝！，現在我仍然有一個小問題，實際上根據dataSales []，條應該變高，就像height = dataSales [i]/800，有沒有辦法做到這一點？ – user3441089

https://jsfiddle.net/a0b4mu2y/1/ – JosiahDaniels

在javascript中創建動畫循環（canvas）

回答

相關問題