javascript - 如何在 Canvas 中的形状后面创建轨迹？

现在，当用户旋转鼠标滚轮时，会生成一些形状（我只包括了三角形，因为它们都是以相同的方式生成的）。我想在逐渐消失的形状后面留下痕迹。我环顾四周并尝试了几种不同的方法，但似乎无法使它们中的任何一种起作用。这是代码：

<html>
<head>
<script>
    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);
}

    window.onload = init;
</script>
</head>
<body>
    <canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>

最佳答案

我设法做到这一点的方法是存储对象的过去位置（例如，过去的10个位置，然后从一个位置绘制到下一个位置。

1.将数组pastX和pastY添加到三角形对象。

this.pastX = [];
this.pastY = [];

2.每个刻度线将每个元素再放置1个位置，并首先添加当前位置。

在更新三角形位置之前

    for(var k = t.pastX.length; k > 0; k--){
        if(k < 10){
        t.pastX[k] = pastX[k-1];
        t.pastY[k] = pastY[k-1];
        }
     t.pastX[0] = t.x;
     t.pastY[0] = t.y;

这样在它们之间画线（从0到1，从1到2，依此类推）；

for（var k = 0; k //画一条线从pastX [k]，pastY [k]到pastX [k + 1]，pastY [k + 1]
}

希望我能帮到你。