如何绘制出现在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>

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

How to draw a animated line appearing in canvas html5?

javascript

jquery

animation

draw

html5-canvas