Анимационный бар на холсте - PullRequest
Новая
       6

Анимационный бар на холсте

0 голосов
/ 06 октября 2018

Итак, я пытаюсь создать анимированный график, в котором один бар анимируется снизу вверх, одновременно.Проблема в том, что когда я его запускаю, отображается только одна полоса без анимации.Кто-нибудь может помочь?

Код: 

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;
}

1 Ответ

0 голосов
/ 06 октября 2018

Поскольку вы не даете мне результат config(), я изобрел объект config.

Я пытался сделать это так, как вы хотели.Я бы организовал данные по-другому.

Для того, чтобы анимировать бары, которые я использую requestAnimationFrame, так как они намного эффективнее.Если вы предпочитаете, вы можете использовать setInterval().

Пожалуйста, прочитайте комментарии в моем коде.

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>
...