Question

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

<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>

Answer 1

我设法做到这一点的方法是存储我的对象的过去位置（例如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＆lt; t.pastX.length - 1; k ++）{ //从pastX [k]，pastY [k]到pastX [k + 1]，pastY [k + 1]画线 }

希望我帮助过你。

如何在画布中创建形状后面的痕迹？

1 个答案: