画布中的动画栏

Question

So, I'm trying to create an animated chart, where one bar is animated from bottom to top, at the time. The problem is when I run it, is shown only one bar with no animation. Any one can help?

The code:

let canvas = document.getElementById('chart');
let ctx = canvas.getContext('2d');

let values = config().data;
let width = config().width;
let spaceBetweenBars = config().spaceBetweenBars;
let startingX = 50;

canvas.height = 300;
canvas.width = 400;
ctx.fillStyle = config().color;

for (let i = 0; i < values.length; i++) {
    let height = values[i];
    let l = 0;
    while(l < height){
        setTimeout(()=>{
            ctx.fillRect(startingX, canvas.height - height, width, l)                
        },1000)
        l++;
    }
    startingX += width + spaceBetweenBars;
} 

Answer 1

Since you don't give me the result of the config() I've invented a config object.

I've tried to do it the way you wanted to do it. I would have organised the data differently.

In order to animate the bars I'm using requestAnimationFrame since it's much more efficient. If you prefer you may use setInterval() instead.

Please read the comments in my code.

 let canvas = document.getElementById('chart'); let ctx = canvas.getContext('2d'); canvas.height = 150; canvas.width = 400; let config = {width:30,height:0,spaceBetweenBars:5,color:"green"}; let values = [35,48,98,34,55]; // copy the values array and fill it with 0. // This is the value of bars height during the animation let currentValues = values.slice().fill(0); // [0,0,0,0,0] let startingX = 50; function drawBar(height,i){ let x = startingX; x += i*(config.width + config.spaceBetweenBars); ctx.fillStyle = config.color; ctx.beginPath(); ctx.fillRect(x, canvas.height, config.width, -height); } // I'm using requestAnimationFrame since it's much more efficient. function drawChart(){ window.requestAnimationFrame(drawChart); for(let i = 0; i < values.length;i++) { if(currentValues[i] < values[i]){ currentValues[i] ++; drawBar(currentValues[i],i) } } } drawChart() 

 canvas{border:1px solid;} 

 <canvas id="chart"></canvas>