Очистить контекст холста постепенно (след мыши?) - PullRequest
Новая
       17

Очистить контекст холста постепенно (след мыши?)

0 голосов
/ 14 марта 2019

Если вы увидите запуск фрагмента кода, который у меня есть, вы будете использовать эту HTML-схему для рисования на холсте, которая сегментирована, чтобы раскрасить дуги в градиенте.

Я пытаюсь выяснить, как постепенно очистить контекст старых «дуг» от конца рисунка, похожий на эффект «следа мыши», возможно, похожий на этот: https://imgur.com/a/2Lr9IYq

Я думаю, возможно, как-то, когда счетчик total превысит счет segment, он очищается, но я не совсем уверен, как это сделать.

Благодарен, если кто-нибудь может указать мне правильное направление! 

var c = document.querySelector("canvas"),
        ctx = c.getContext("2d"),
        colors = [
          {r: 0, g: 0, b: 0, a:1},
          {r: 255, g: 255, b: 255, a:1},
        ],
        cIndex = 0, maxColors = colors.length,
        total = 0, segment = 1000,
        isDown = false, px, py;


    setSize();
          
    c.onmousedown = c.ontouchstart = function(e) {
      isDown = true;
      var pos = getPos(e);
      px = pos.x;
      py = pos.y;
    };

    c.onmousemove = c.ontouchmove = function(e) {if (isDown) plot(e)};
    c.onmouseup = c.ontouchend = function(e) {
      e.preventDefault();
      isDown = false
    };

    function getPos(e) {
      // e.preventDefault();
      if (e.touches) e = e.touches[0];
      var r = c.getBoundingClientRect();
      return {
        x: e.clientX - r.left,
        y: e.clientY - r.top
      }
    }

    function plot(e) {
      var pos = getPos(e);
      plotLine(ctx, px, py, pos.x, pos.y);
      px = pos.x;
      py = pos.y;
    }

    function plotLine(ctx, x1, y1, x2, y2) {

      var diffX = Math.abs(x2 - x1),
          diffY = Math.abs(y2 - y1),
          dist = Math.sqrt(diffX * diffX + diffY * diffY),
          step = dist / 50,
          i = 0,
          t, b, x, y;
      
      while (i < dist) {
        t = Math.min(1, i / dist);

        x = x1 + (x2 - x1) * t;
        y = y1 + (y2 - y1) * t;



        // ctx.shadowBlur = 500;
        // ctx.shadowOffsetX = 0;
        // ctx.shadowOffsetY = 0;
        // ctx.shadowColor = getColor();

        // console.log(getColor())
        ctx.fillStyle = getColor();
        ctx.beginPath();
        ctx.arc(x, y, 25, 0, Math.PI*2);

        ctx.fill();
        i += step;
      }
      
      function getColor() {
      
        var r, g, b, a, t, c1, c2;
        
        c1 = colors[cIndex];
        c2 = colors[(cIndex + 1) % maxColors];
        t = Math.min(1, total / segment);
        
        if (++total > segment) {
          total = 0;
          if (++cIndex >= maxColors) cIndex = 0;
        }
      
        r = c1.r + (c2.r - c1.r) * t;
        g = c1.g + (c2.g - c1.g) * t;
        b = c1.b + (c2.b - c1.b) * t;
        a = c1.a + (c2.a - c1.a) * t;
        

        return "rgb(" + (r|0) + "," + (g|0) + "," + (b|0) + "," + (a) + ")";
      }
    }

    window.onresize = setSize;
    function setSize() {
      c.width = window.innerWidth;
      c.height = window.innerHeight;
    }
html, body {
      margin:0;
      padding:0;
    }

 
    body {
      padding: 0px;
    }
<canvas id="myCanvas" ></canvas>
...