如何在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中根据时间在画布上绘制条形图

回答

相关问题