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; } 
 <canvas id="canvas"></canvas>

  • one
    Rather, it is necessary to setTimeout here, so as not to constantly interval, but only once, to all this, each line needs to be done through a timeout. - And
  • I thought so, but wouldn't it be too loud. - Winduke Alexander

1 answer 1

 var canvas = document.getElementById('canvas').getContext('2d'), lines = [ [0, 0, 10, 0, 333, .4], [20, 0, 30, 0, 600, .25], [40, 0, 50, 0, 1500, .6] ]; lines.forEach(array => { setTimeout(() => { canvas.globalAlpha = array[5]; canvas.beginPath(); canvas.moveTo(array[0], array[1]); canvas.lineTo(array[2], array[3]); canvas.stroke(); }, array[4]); }); 
 canvas { width:400px; height:200px; border:1px solid lightgreen; } 
 <canvas id="canvas"></canvas>