Question

现在我的代码就像我想要的那样工作但是当我创建我的计时器来重绘三角形时，它每次调用都会覆盖一个新的三角形，所以要停止这个我把clearRect放进去，但现在它清除了整个画布否定了我所拥有的黑色。我怎么能添加一个新的计时器仍然提供相同的移动三角形效果，但不需要clearRect或如何修复我必须使画布的背景保持黑色而不是每次都覆盖新的三角形？任何帮助表示赞赏！

编辑：我也尝试了两个不同的计时器，而不是一个用于handleClick的计时器，但是在三角形的速度下得到了奇怪的结果，有谁知道为什么会这样？：

timer = setInterval(init, 30);
timer = setInterval(Triangle, 30);

代码：

<html>
<head>
<script>
    var canvas;
    var context;
    var triangles = [];
    function init() {
        canvas = document.getElementById('canvas');
        context = canvas.getContext('2d');
        resizeCanvas();
        window.addEventListener('resize', resizeCanvas, false);
        window.addEventListener('orientationchange', resizeCanvas, false);
        canvas.onclick = function(event) {
            handleClick(event.clientX, event.clientY);
        };
        timer = setInterval(handleClick, 30);
    }
    function Triangle(x,y,color) {
        this.x = x;
        this.y = y;
        this.color = color;
        this.vx = Math.random() * 10 - 5; //5-3
        this.vy = Math.random() * 10 - 5;
        for (var i=0; i < triangles.length; i++) {
            var t = triangles[i];
            t.x += t.vx;
            t.y += t.vy;
            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;
        }
    }
    function handleClick(x,y) {
        context.clearRect(0,0, canvas.width,canvas.height);
        var colors = ['red','green','purple','blue','yellow'];
        var color = colors[Math.floor(Math.random()*colors.length)];
        triangles.push(new Triangle(x, y, color));
        for(i=0; i < triangles.length; i++) {
            drawTriangle(triangles[i]);
        }
    }
    function drawTriangle(triangle) {
        context.beginPath();
        context.moveTo(triangle.x,triangle.y);
        context.lineTo(triangle.x + 50,triangle.y + 50);
        context.lineTo(triangle.x + 50,triangle.y - 50);
        context.fillStyle = triangle.color;
        context.fill();
    }
    function resizeCanvas() {
         canvas.width = window.innerWidth-10;
       canvas.height = window.innerHeight-10;
        fillBackgroundColor();
        for(i=0; i < triangles.length; i++) {
            drawTriangle(triangles[i]);
        }
    }
    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">
</body>
</html>

Answer 1

我花了几分钟阅读你的代码，发现有一件事对我很有帮助。首先，当您致电timer = setInterval(handleClick, 30);时，命令会在handleClick函数中从上到下运行。因此，当我们查看该函数时，您绘制的第一件事就是黑色背景。然后，你推出一个全新的三角形。在此之后，使用循环绘制数组中的所有三角形。这就是问题所在。你正在做的是绘制所有过去的三角形，在刷新的黑色矩形的顶部。

尝试将代码设置为类似的内容。

function handleClick(x,y) {
        context.clearRect(0,0, canvas.width,canvas.height);
        var colors = ['red','green','purple','blue','yellow'];
        var color = colors[Math.floor(Math.random()*colors.length)];
        triangles.push(new Triangle(x, y, color));
        triangles.shift(); //This removes the first point in the array, and then shifts all other data points down one index.
        for(i=0; i < triangles.length; i++) {
            drawTriangle(triangles[i]);
        }
    }

如果我错过解释您的任何代码，或者您有跟进问题，请告诉我。

如何清除画布但保持填充？

1 个答案: