0

I´m wondering what is the right way to draw a line animation to display slowly like this effect in the opening seconds. http://dreamteam.pl/

Thanks!!

Acicate
  • 63
  • 2
  • 10

1 Answers1

0

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>
Kurenai Kunai
  • 1,842
  • 2
  • 12
  • 22
  • 1
    Not correct! You're allowing `setInterval` to continue running forever. Please review using `clearInterval`: http://stackoverflow.com/questions/1831152/how-to-stop-setinterval – markE Jun 04 '15 at 22:42
  • Why do you need to add jQuery script? As far i can see there is no ned of jQuery. – nixon1333 May 15 '17 at 08:16