0

Lo que sucede es que estoy implementando una animación para simular el efecto de agua en un circulo, para ello estoy usando un Js que encontré en linea llamado "waterwave", pero no logro cambiar el color del fondo negro, ya intente de varias formas y la verdad, ninguna me funciona.

(function($) {
  $.fn.waterwave = function(options) {
    // DEFAULT OPTIONS
    var settings = $.extend({
      parent: '',
      color: '#fcd600',
      direction: 'up',
      background: ''
    }, options);

    var waterwave = this;

    waterwave.init = function() {
      var TAU = Math.PI * 1;
      var density = 2;
      var speed = 1;
      var res = 0.005; // percentage of screen per x segment
      var outerScale = 0.05 / density;
      var inc = 0;
      var c = waterwave[0];
      var ctx = c.getContext('2d');
      // var grad = ctx.createLinearGradient(252, 214, 0, c.height * 4);
      function onResize() {
        if (options.direction == 'down') {
          waterwave.attr({
            width: "100px"
          });
        } else {
          waterwave.attr({
            width: "100px",
            height: "100px"
          });
        }
      }

      onResize();
      setTimeout(function() {
        loop();
      }, 500);
      $(window).resize(onResize);

      function loop() {
        inc -= speed;
        drawWave(options.color);
        requestAnimationFrame(loop);
      }


      function drawBG(patternCanvas, w, h) {
        var space = ctx.createPattern(patternCanvas, 'repeat');
        ctx.fillStyle = space;
        ctx.fillRect(0, 0, w, h);
      }

      function drawWave(color) {
        var w = c.offsetWidth;
        var h = c.offsetHeight;
        var cx = w * 0.5;
        var cy = h * 0.5;
        ctx.clearRect(0, 0, w, h);
        var segmentWidth = w * res;
        if (options.background != '') {
          var image = new Image();
          image.src = options.background;
          image.onload = function() {
            // create an off-screen canvas
            var patt = document.createElement('canvas');
            // set the resized width and height
            patt.width = w;
            patt.height = h;
            patt.getContext('2d').drawImage(this, 0, -1 * (h / 4), patt.width, patt.height);
            // pass the resized canvas to your createPattern
            drawBG(patt, w, h);
          };
        } else {
          ctx.fillStyle = color;
        }
        ctx.beginPath();
        ctx.moveTo(0, cy);
        for (var i = 0, endi = 1 / res; i <= endi; i++) {
          var _y = cy + Math.sin((i + inc) * TAU * res * density) * cy * Math.sin(i * TAU * res * density * outerScale);
          var _x = i * segmentWidth;
          ctx.lineTo(_x, _y);
        }
        if (options.direction == 'down') {
          ctx.lineTo(w, 0);
          ctx.lineTo(0, 0);
        } else {
          ctx.lineTo(w, h);
          ctx.lineTo(0, h);
        }
        ctx.closePath();
        ctx.fill();
      }
    };


    waterwave.init();

    return waterwave;


  };
}(jQuery));
canvas {
  background-color: transparent;
  border-radius: 50%;
  border: 1px solid #979797;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type='text/javascript'>
  $(function() {
    var box = $(".waterwave-canvas").waterwave({});
  });
</script>
<div id="canvas-cont">
  <canvas class="waterwave-canvas"></canvas>
</div>

1 respuesta 1

1

Cámbialo por lo siguiente, busca el comentario

//Agrega el color deseado

(function($) {
  $.fn.waterwave = function(options) {
    // DEFAULT OPTIONS
    var settings = $.extend({
      parent: '',
      color: '#fcd600',
      direction: 'up',
      background: ''
    }, options);

    var waterwave = this;

    waterwave.init = function() {
      var TAU = Math.PI * 1;
      var density = 2;
      var speed = 1;
      var res = 0.005; // percentage of screen per x segment
      var outerScale = 0.05 / density;
      var inc = 0;
      var c = waterwave[0];
      var ctx = c.getContext('2d');
      
      // var grad = ctx.createLinearGradient(252, 214, 0, c.height * 4);
      function onResize() {
        if (options.direction == 'down') {
          waterwave.attr({
            width: "100px"
          });
        } else {
          waterwave.attr({
            width: "100px",
            height: "100px"
          });
        }
      }

      onResize();
      setTimeout(function() {
        loop();
      }, 500);
      $(window).resize(onResize);

      function loop() {
        inc -= speed;
        drawWave(options.color);
        requestAnimationFrame(loop);
      }


      function drawBG(patternCanvas, w, h) {
        var space = ctx.createPattern(patternCanvas, 'repeat');
        ctx.fillStyle = space;
        ctx.fillRect(0, 0, w, h);        
      }

      function drawWave(color) {
        var w = c.offsetWidth;
        var h = c.offsetHeight;
        var cx = w * 0.5;
        var cy = h * 0.5;
        ctx.clearRect(0, 0, w, h);
        var segmentWidth = w * res;
        if (options.background != '') {
          //Agrega el color deseado
          ctx.fillStyle = '#f00';          
        }
        ctx.beginPath();
        ctx.moveTo(0, cy);
        for (var i = 0, endi = 1 / res; i <= endi; i++) {
          var _y = cy + Math.sin((i + inc) * TAU * res * density) * cy * Math.sin(i * TAU * res * density * outerScale);
          var _x = i * segmentWidth;
          ctx.lineTo(_x, _y);
        }
        if (options.direction == 'down') {
          ctx.lineTo(w, 0);
          ctx.lineTo(0, 0);
        } else {
          ctx.lineTo(w, h);
          ctx.lineTo(0, h);
        }
        ctx.closePath();
        ctx.fill();
      }
    };


    waterwave.init();

    return waterwave;


  };
}(jQuery));
canvas {
  background-color: transparent;
  border-radius: 50%;
  border: 1px solid #979797;
}
<div id="canvas-cont">
  <canvas class="waterwave-canvas"></canvas>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type='text/javascript'>
  $(function() {
    var box = $(".waterwave-canvas").waterwave({});
  });
</script>

1
  • ¡Muchas gracias amigo! Commented el 10 oct. 2018 a las 20:18

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.