如何将画布元素导入漏斗形状

时间:2016-06-08 17:12:47

标签: javascript canvas

我有以下画布动画随机' rain'像重力元素:

  $(document).ready(function() {
    var canvas = $('#canvas')[0];
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    if(canvas.getContext) {
      var ctx = canvas.getContext('2d');
      var w = canvas.width;
      var h = canvas.height;
      ctx.strokeStyle = "rgba("+Math.round(Math.random())*255+", "+Math.round(Math.random())*255+", "+Math.round(Math.random())*255+", 0.5)";
      ctx.lineWidth = 1;
      ctx.lineCap = 'round';


      var init = [];
      var maxParts = 1000;
      for(var a = 0; a < maxParts; a++) {
        init.push({
          x: Math.random() * w,
          y: Math.random() * h,
          l: Math.random() * 1,
          xs: -4 + Math.random() * 4 + 2,
          ys: Math.random() * 10 + 10
        })
      }

      var particles = [];
      for(var b = 0; b < maxParts; b++) {
        particles[b] = init[b];
      }

      function draw() {
        ctx.clearRect(0, 0, w, h);
        for(var c = 0; c < particles.length; c++) {
          var p = particles[c];
          ctx.beginPath();
          ctx.moveTo(p.x, p.y);
          ctx.lineTo(p.x + p.l * p.xs, p.y + p.l * p.ys);
          ctx.stroke();
        }
        move();
      }

      function move() {
        for(var b = 0; b < particles.length; b++) {
          var p = particles[b];
          p.x += p.xs;
          p.y += p.ys;
          if(p.x > w || p.y > h) {
            p.x = Math.random() * w;
            p.y = -20;
          }
        }
      }

      setInterval(draw, 30);

    }
  });

https://codepen.io/chriscamplin/pen/OXyeVP

我如何扩展它以收集漏斗形状的元素并缩小它们,就像沙漏计时器一样。

0 个答案:

没有答案