Как сделать появление по очереди а не сразу всех линий?

Question

[reddy89]

Есть полоса из пунктиров, мне нужно получить плавное очередное появление линий. Подскажите как сделать? Мне сказали, что нужно использовать цикл, но я не понимаю как это сделать с помощью циклов.
var canvas = document.getElementById('canvas').getContext('2d');

var alpha = 0;
canvas.globalAlpha = alpha;

function draw() {
canvas.beginPath();
canvas.moveTo(0, 0);
canvas.lineTo(10, 0);
canvas.stroke();
canvas.beginPath();
canvas.moveTo(20, 0);
canvas.lineTo(30, 0);
canvas.stroke();
canvas.beginPath();
canvas.moveTo(40, 0);
canvas.lineTo(50, 0);
canvas.stroke();
alpha += .01;
canvas.globalAlpha = alpha;
if (alpha < 1)
setInterval(draw, 200);

}

draw();

canvas {
width:400px;
height:200px;
border:1px solid lightgreen;
}

Answer 1

[Ice]

Информация по JS анимации https://learn.javascript.ru/js-animation