0

Deseo crear un elemento en canvas que cambie el grosor del borde cada 3 segundos, que tenga un grosor de linea 5px iniciando, 3 segundos despues tenga otro grosor de 10px, luego de 3 segundos inicie de nuevo en grosor 5px. Es decir, que este en un loop infinito en cambio de grosor de border. ¿Alguna sugerencia?

var c=document.getElementById("myCanvas");
      var ctx=c.getContext("2d");

      ctx.strokeStyle="red";
      ctx.lineWidth=5;
      ctx.strokeRect(20,20,100,100);

      setTimeout(function() {
          ctx.clearRect(20,20,100,100);
          //ctx.strokeStyle="black";
          ctx.lineWidth=10;
          ctx.strokeRect(20,20,100,100);
      }, 3000);

1 respuesta 1

0

Puedes utilizar setInterval para ejecutar la función cada 3 segundos y utilizar un flag externo para establecer con qué ancho se debe dibujar:

var c=document.getElementById("myCanvas");
      var ctx=c.getContext("2d");
      ctx.strokeStyle="red";

      var flag = true;
      function dibujar() {
          ctx.clearRect(20,20,100,100);
          ctx.lineWidth=  flag ? 5 : 10;
          flag = !flag;
          ctx.strokeRect(20,20,100,100);
      }
      // Dibujo inicial
      dibujar();
      // Repetir cada 3 s
      setInterval(dibujar, 3000);
<canvas id="myCanvas" width="200" height="200"></canvas>

3
  • Excelente!! Me parece muy bien, el único detalle es que inicia en blanco el DOM, después de 3 segundos inicia con width 5
    – mestanza
    Commented el 12 feb. 2018 a las 15:42
  • No tienes más que ejecutar la función antes de establecer el setInterval. Modifico la respuesta para mostrarlo. Commented el 12 feb. 2018 a las 15:43
  • Excelente! Muchísimas gracias por tu ayuda!!
    – mestanza
    Commented el 12 feb. 2018 a las 15:52

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.