0

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>

1 respuesta 1

0

No se si es esto lo que buscabas, pero yo he probado con un intervalo y ya me dirás si es lo que buscas. Solo he puesto la función que modifiqué y otra que añadí, el resto de funciones siguen igual

Primero hay que crear un array de coordenadas que son las que tu ponías como ctx.lineTo y luego creamos un intervalo y una función que dibuja la grafica

function dibujarGrafico(){
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    const puntos = [[70,300],[200,250],[220,260],[265,225],[275,240],[330,210],[350,180]]

    let contador = 1;

    const interval = setInterval(()=>{
        dibujarINtervalo(puntos.slice(0,contador), ctx);
        contador ++;
        if(contador > puntos.length){
            clearInterval(interval);
        } 
    },1000)

}

function dibujarINtervalo(array, ctx){
    ctx.beginPath();
    array.forEach((x,index) => {
        if (index === 0) ctx.moveTo(x[0],x[1]);
        else ctx.lineTo(x[0],x[1])
    })

    ctx.strokeStyle = "#5eab3e";
    ctx.lineWidth=3;
    ctx.stroke()
    ctx.closePath();
}

Solo he probado con unos pocos puntos para ver si funcionaba y te servía. Si quieres añadir mas, solo hay que añadir mas coordenadas al array puntos y listo

6
  • Sii! Es exactamente lo que busco, MIL GRACIAS! Podrías por favor añadirme una explicacion breve del codigo? Mas que nada del "for each", el puntos.slice y la variable del intervalo. Te agradeceria un monton!
    – btmn_ctwmn
    Commented el 30 jun. 2022 a las 0:15
  • en el intervalo, se llama a la funcion dibujarIntervalo el parámetro que se le envía es un array con los puntos a dibujar. El método slice de los arrays lo que hace es que devuelve un array nuevo en el que le indicas el indice donde empieza y el indice donde termina(este no está incluido) así, para cada intervalo se añade 1 elemento al array que se le envía a la función que dibuja la linea
    – Suso
    Commented el 30 jun. 2022 a las 0:27
  • Me olvidaba. En el forEach lo que hacemos es recorrer el array de coordenadas que nos llega y para cada elemento añadir un punto al canvas
    – Suso
    Commented el 30 jun. 2022 a las 0:28
  • La variable del intervalo no se a cual te refieres, pero si te refieres en donde declaramos el intervalo, es para que cuando llegues al final del array, eliminar el intervalo y que no quede pendiente.
    – Suso
    Commented el 30 jun. 2022 a las 0:34
  • Todo me quedo claro! Gracias! Lo unico sigo sin entender este fragmento: array.forEach((x,index) => { if (index === 0) ctx.moveTo(x[0],x[1]); else ctx.lineTo(x[0],x[1]) })
    – btmn_ctwmn
    Commented el 1 jul. 2022 a las 22:53

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.