Obs: Sou iniciante
Alguem poderia me explicar o codigo desta animação linha por linha, de forma a me explicar cada acontecimento.
Analisar LINHA POR LINHA
<!doctype html>
<html>
<head>
<title> CanvsCar </title>
</head>
<body>
<canvas id="mycanvas" width="778" height="300" style="border: 2px solid #666" ></canvas>
<script>
var c= document.getElementById("mycanvas");
var ctx= c.getContext("2d");
role(0,250);
function role(x,y){
ctx.lineWidth=1;
ctx.save();
//ctx.beginPath();
if (x <= 800){
x++;
}
else{
x=0;
}
var gradient = ctx.createLinearGradient(40,200,340,100);
ctx.strokeStyle = gradient;
ctx.lineWidth = 520 ;
ctx.beginPath();
ctx.moveTo(c.width,0);
ctx.lineTo(0,0);
ctx.stroke();
//text
ctx.font = '80px arial ';
ctx.fillStyle = 'green';
ctx.fillText('CanvsCar !', 280, 90);
//carro
var img = new Image();
var width = 240;
var height = 240;
img.src = 'https://image.freepik.com/icones-gratis/silhueta-de-carros-antigos-de-vista-lateral_318-43958.jpg';
ctx.drawImage(img,x-30,y-148,width,height);
var loopTimer = setTimeout('role('+x+','+y+')',5);
}
</script>
</body>
</html>