javascript - slowly animate a simple line -
my problem line draw instantaneous . what want draw line slowly , 3-5 seconds before finishes @ dy . reason cannot settimeout() work. have tried large , small values. i have basic line example expand on concept include x , bezier lines once can figure how timeout works. var canvas = document.getelementbyid('mycanvas'); var context = canvas.getcontext('2d'); function myline(x, y, dx, dy) { //line constructor this.x = x; //start x this.y = y; //start y this.dx = dx; //end x this.dy = dy; //end y } var line = new myline(100, 5, 100, 100); //line object function drawline(myline, context) { //draw function context.moveto(myline.x, myline.y); animate(line, context); } function animate(myline, context) { //animation function if (myline.y < myline.dy) { myline.y = myline.y + 1; context.lineto(myline.dx, myline.y); context.stroke(); window.settimeout(animate(line, context), 1000/60); } } drawline(line, contex...
