Estoy aprendiendo a usar canvas en html y se me pide realizarle una animación. El canvas que yo hice es un grafico de lineas que se muestra al presionar un boton. Como animacion quisiera hacer que el grafico se vaya dibujando de izquierda a derecha a medida que pasa el tiempo. Es decir, que no aparezca repentinamente todo el grafico ya dibujado. Mi profe uso un ejemplo de una imagen que era un auto que se movia de un lado a otro, usando SetInterval. No se me ocurre como aplicarlo en mi canvas.
function dibujarEjes() {
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var alturaMax = canvas.height - 50;
var anchoMax = canvas.width - 50;
//Lineas Horizontales
ctx.beginPath();
for (var i = 80; i < alturaMax;) {
ctx.moveTo(70, i);
ctx.lineTo(730, i);
ctx.strokeStyle = "#afafaf";
ctx.stroke();
i = i + 70;
}
ctx.closePath()
//Lineas Verticales
ctx.beginPath()
for (var i = 70; i < anchoMax;) {
ctx.moveTo(i, 70);
ctx.lineTo(i, 360);
ctx.strokeStyle = "#afafaf";
ctx.stroke();
i = i + 65;
}
ctx.fillText("Década", (canvas.width/2)-30, canvas.height-40);
ctx.fillText("MtCO2/día", (canvas.width/4)-150, canvas.height-400);
ctx.fillText("100", (canvas.width/4)-160, canvas.height-367);
ctx.fillText("80", (canvas.width/4)-160, canvas.height-297);
ctx.fillText("60", (canvas.width/4)-160, canvas.height-227);
ctx.fillText("40", (canvas.width/4)-160, canvas.height-157);
ctx.fillText("1970", (canvas.width/4)-145, canvas.height-75);
ctx.fillText("1980", (canvas.width/4)-10, canvas.height-75);
ctx.fillText("1990", (canvas.width/2)-80, canvas.height-75);
ctx.fillText("2000", (canvas.width/2)+50, canvas.height-75);
ctx.fillText("2010", (canvas.width/2)+180, canvas.height-75);
ctx.fillText("2020", (canvas.width/2)+310, canvas.height-75);
}
function dibujarGrafico(){
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.moveTo(70,300);
ctx.lineTo(200,250);
ctx.lineTo(220,260);
ctx.lineTo(265,225);
ctx.lineTo(275,240);
ctx.lineTo(330,210);
ctx.lineTo(350,180);
ctx.lineTo(400,170);
ctx.lineTo(430,150);
ctx.lineTo(520,120);
ctx.lineTo(535,135);
ctx.lineTo(570,110);
ctx.lineTo(630,100);
ctx.lineTo(730,60);
ctx.strokeStyle = "#5eab3e";
ctx.lineWidth=3;
ctx.stroke()
ctx.closePath();
}
<body id="body_index" onload="dibujarEjes()">
<div id="div_canvas">
<h1 id="titulo_grafico">Evolución de emisiones diarias de CO2 procedente de combustibles fósiles</h1>
<p>
<button type="button" id="boton_ver_grafico" onclick="dibujarGrafico()" >Ver Gráfico</button>
</p>
<canvas width="800px" height="450px" id="canvas">
Tu navegador no soporta el tag de HTML5 de "canvas"
</canvas>
</div>
</body>