проблемы setInterval

[nata031189]

данный кусок кода рисует 3 графики через интревал времени 1с.
А мне нужно,чтобы графики рисовало по точкам, то есть плавное появление графика. Как это сделать? Помогите, очень надо.

var massCoord=[[57,100,200,250,300,300,400,200,450,200],[57,100,200,350,300,400,400,250,450,300],[57,100,200,150,300,200,400,50,450,100]];
				var lengMass = massCoord[0].length;
				var countGraf =  massCoord.length;
				var lineColor = ['red','yellow','green'];
				var i  = 0;
				var timerLine = window.setInterval(function()
				{
					s.beginPath();
					s.strokeStyle = lineColor[i];
					s.moveTo(massCoord[i][0], massCoord[i][1]);
					var j = 2;
					while(j < lengMass)
					{
						s.lineTo(massCoord[i][j], massCoord[i][j+1]);
						s.stroke();	
						j+=2;
					}
					++i;
					if (i >= countGraf) clearInterval(timerLine);
				}
				, 1000);

[Deff]

nata031189,
имхо самое простое - рисованный картинку-график перекрывать непрозрачным диваком, который чисто сдвигать анимацией

[nata031189]

а через setInterval нельзя сделать?

[nata031189]

while(j < lengMass)
					{
						window.setInterval(function()
						{
						
						s.lineTo(massCoord[i][j], massCoord[i][j+1]);
						s.stroke();	
						},100);
						j+=2;
					}

по логике как-то так должно быть, но при этом у і і j не верные значение.

[Deff]

nata031189,
Эту тему - гляньте
формула для вычисления координаты в canvas