如何绘制出现在canvas html5中的动画线？

Question

我想知道什么是正确的方式来绘制线条动画，以在开放时间内缓慢地显示这种效果。 http://dreamteam.pl/

谢谢!!

Answer 1

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 to alter duration 
 
    if (amount > 1) amount = 1; 
 
    c.clearRect(0, 0, canvas.width, canvas.height); 
 
    c.strokeStyle = "black"; 
 
    c.moveTo(startX, startY); 
 
    // lerp : a + (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>