javascript - How to draw a animated line appearing in canvas html5? -
i´m wondering right way draw line animation display effect in opening seconds. http://dreamteam.pl/
thanks!!
var canvas = $("#paper")[0]; var c = canvas.getcontext("2d"); var startx = 10; var starty = 10; var endx = 500; var endy = 10; var amount = 0; setinterval(function() { amount += 0.05; // change alter duration if (amount > 1) amount = 1; c.clearrect(0, 0, canvas.width, canvas.height); c.strokestyle = "black"; c.moveto(startx, starty); // lerp : + (b - a) * f c.lineto(startx + (endx - startx) * amount, starty + (endy - starty) * amount); c.stroke(); }, 30);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <canvas id="paper" width="500" height="500"></canvas>
Comments
Post a Comment