Ir ao conteúdo
  • Cadastre-se

Analise do Codigo (linha por linha)


Posts recomendados

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>

 

Link para o comentário
Compartilhar em outros sites

Visitante
Este tópico está impedido de receber novas respostas.

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...