Change color to an item in the Canvas

0

What happens is that I am implementing an animation to simulate the effect of water in a circle, for this I am using a Js that I found online called "waterwave", but I can not change the color of the black background, try to several ways and the truth, none works for me.

(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>
    
asked by Jhojan Guerrero 10.10.2018 в 18:25
source

1 answer

1

Change it to the following, look for the comment

// Add the desired color

(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>
    
answered by 10.10.2018 / 20:09
source