如何在html5中根據時間在畫布上繪製條形圖

讓我來解釋清楚。我必須使用html5繪製條形圖，並且我做到了。問題是酒吧的大小必須根據給定的時間增加。即如果我給30的價值和時間爲3，它增加爲10,20，並且必須在第三秒達到30。我在這裏包含了條形碼。如何在html5中根據時間在畫布上繪製條形圖

<!doctype html> 
<html> 
    <head> 
     <script type="text/javascript"> 
      window.onload=function(){ 
       var canvas=document.getElementById('mycanvas'); 
       var ctx=canvas.getContext('2d'); 
       var value=[10,20,30,40,50,90]; 
       var width=50; 
       var currx=30; 
       ctx.fillStyle="red"; 
       for(i = 0; i < value.length; i++) 
       { 
        var h=value[i]; 
        ctx.fillRect(currx,canvas.height-h,width,h); 
        currx+=width+10; 
       } 
      }; 
     </script> 
    </head> 
    <body> 
     <canvas id="mycanvas" height="400" width="400" style="border:1px solid #c3c3c3;"> 
    </body> 
</html>

來源

2012-07-19 Praveen Singh

你忘了你提出質詢。 – Yoshi 2012-07-19 06:58:15

只需使用setTimeout或setInterval來重繪您的酒吧每秒 – Musa 2012-07-19 06:59:30

我同意穆薩。你所要做的就是必須執行'update（）'，它會增加值並調用render（）和render（）來將它繪製到屏幕上。您可能還需要一個設置函數，以設置初始變量並設置時間間隔。 – starbeamrainbowlabs 2012-07-19 07:06:04

<!doctype html> 
<html> 
    <head> 
     <script type="text/javascript"> 
      window.onload=function(){ 
       var canvas=document.getElementById('mycanvas'); 
       var ctx=canvas.getContext('2d'); 
       var value=[180,140,30,340,50,90]; 
       var width=50; 
       var currx=30; 
       ctx.fillStyle="red"; 
       var i = 0; 
       var interval = setInterval(function(){ 
        if (i == value.length){ 
         clearInterval(interval); 
         return; 
        } 
        var h=value[i]; 
        ctx.fillRect(currx,canvas.height-h,width,h); 
        currx+=width+10; 
        i++; 
       }, 2000);console.log(interval); 
      }; 
     </script> 
    </head> 
    <body> 
     <canvas id="mycanvas" height="400" width="400" style="border:1px solid #c3c3c3;"> 
    </body> 
</html>

來源

2012-07-19 09:34:28

如何在html5中根據時間在畫布上繪製條形圖

回答

相關問題