让我解释清楚。我必须使用 html5 绘制条形图，我做到了。问题是条形大小必须根据给定时间增加。 IE。如果我给 30 作为值(value)和时间作为 3。它增加了 10,20 并且必须在第 3 秒达到 30。我在这里包含了条形图代码。
<!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>
最佳答案
<!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>
关于javascript - 如何在html5中根据时间在 Canvas 中绘制条形图，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11555394/