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>

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

1 个答案: