如何绘制一个动画线出现在画布html5

How to draw a animated line appearing in canvas html5?

本文关键字：html5 一个 何绘制 绘制 动画      更新时间：2023-09-26

我想知道什么是正确的方法来画一个线动画慢慢显示像这样的效果在开始的几秒钟。http://dreamteam.pl/

谢谢! !

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>

相关文章：