javascript - 如何在 Canvas 中的形状后面留下痕迹？

Question

现在，我有当用户旋转鼠标滚轮时创建的形状，它们在一段时间后慢慢消失。我如何在每个形状后面生成一条跟随它并慢慢消失的轨迹？代码如下:

    var canvas;
    var context;
    var triangles = [];
    var timer;

    function init() {
      canvas = document.getElementById('canvas');
      context = canvas.getContext("2d");
      resizeCanvas();
      window.addEventListener('resize', resizeCanvas, false);
      window.addEventListener('orientationchange', resizeCanvas, false);
      canvas.onwheel = function(event) {
        handleClick(event.clientX, event.clientY);
      };
      var timer = setInterval(resizeCanvas, 30);
    }

    function Triangle(x, y, triangleColor) {
      this.x = x;
      this.y = y;
      this.triangleColor = triangleColor;

      this.vx = Math.random() * 30 - 15;
      this.vy = Math.random() * 30 - 15;
      this.time = 100;
    }

    function handleClick(x, y) {
      var colors = [
        [0, 170, 255],
        [230, 180, 125],
        [50, 205, 130]
      ];
      var triangleColor = colors[Math.floor(Math.random() * colors.length)];
      triangles.push(new Triangle(x, y, triangleColor));
      for (var i = 0; i < triangles.length; i++) {
        drawTriangle(triangles[i]);
      }
    }

    function drawTriangle(triangle) {
      context.beginPath();
      context.moveTo(triangle.x, triangle.y);
      context.lineTo(triangle.x + 25, triangle.y + 25);
      context.lineTo(triangle.x + 25, triangle.y - 25);
      var c = triangle.triangleColor
      context.fillStyle = 'rgba(' + c[0] + ', ' + c[1] + ', ' + c[2] + ', ' + (triangle.time / 100) + ')';
      context.fill();
    }

    function resizeCanvas() {
      canvas.width = window.innerWidth - 20;
      canvas.height = window.innerHeight - 20;
      fillBackgroundColor();
      for (var i = 0; i < triangles.length; i++) {
        var t = triangles[i];
        drawTriangle(t);

        if (t.x + t.vx > canvas.width || t.x + t.vx < 0)
          t.vx = -t.vx
        if (t.y + t.vy > canvas.height || t.y + t.vy < 0)
          t.vy = -t.vy
        if (t.time === 0) {
          triangles.splice(i, 1);
        }

        t.time -= 1;
        t.x += t.vx;
        t.y += t.vy;
      }
    }

    function fillBackgroundColor() {
      context.fillStyle = "black";
      context.fillRect(0, 0, canvas.width, canvas.height);
    }


  init()

<canvas id="canvas" width="500" height="500"></canvas>

Answer 1

嗯，今天是周日。这是一种有效的方法:

1. 向构造函数中的三 Angular 形对象属性添加一个空数组和不透明度属性，并调用它们，例如 trails和alpha分别。

2. 定义轨迹中所需的幻影三 Angular 形的最大数量。我发现 3 个很有值(value):

       var MAX_GHOSTS = 3;
   

3. 使三 Angular 形绘制函数将 Alpha channel 值作为其第二个参数，并从函数本身内部删除不透明度计算:

       function drawTriangle(triangle, alpha) { // two parameters required }
   

4. 当前在计时器回调(循环内)中绘制三 Angular 形的位置，计算并更新调用 drawTriangle 时使用的三 Angular 形的 alpha 值。 。将所选三 Angular 形属性的副本推送到三 Angular 形的轨迹数组上:复制会卡住 x,y 位置。不插入每个计时器调用会使重影图像进一步分开:

       if( t.time%2 == 0) {
           t.trails.push(
            { x: t.x, y: t.y, alpha: t.alpha, triangleColor: t.triangleColor}
            );
       }
   

5. 同样在定时器回调中，在现有绘图循环之前，添加一个新的双层嵌套循环结构，其中

   • 外部循环检索三 Angular 形数组中每个条目的踪迹数组。如果 Trails 数组长度超过 MAX_GHOST，则删除其第一个元素(使用 splice )。

   • 内部循环，使用 j作为索引，从 Trails 数组中获取下一个元素，将其称为 crumb例如。计算一个alpha值使其快速淡出并绘制它:

          drawTriangle( crumb, (j+1)/(MAX_GHOSTS + 2) * crumb.alpha);
     

希望您喜欢!