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

现在我的代码就像我希望的那样工作，但是当我创建计时器重新绘制三角形时，每次调用它时，它都会覆盖一个新的三角形，所以为了停止这个操作，我将clearRect放入，但是现在它清除了整个画布，否定了我的黑色填充。我如何添加一个新的计时器，它仍然提供移动三角形的相同效果，但不需要clearRect，或者我如何修复画布背景保持黑色但不每次覆盖新三角形的问题？感谢您的帮助

编辑：我也尝试了两个不同的计时器，而不是handleClick的计时器，但得到了三角形速度的奇怪结果，有人知道为什么吗

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

代码：

var帆布；
var语境；
var三角形=[]；
函数init（）{
canvas=document.getElementById（'canvas'）；
context=canvas.getContext（'2d'）；
调整画布的大小（）；
addEventListener（'resize'，resizeCanvas，false）；
window.addEventListener（'orientationchange'，resizeCanvas，false）；
canvas.onclick=函数（事件）{
handleClick（event.clientX，event.clientY）；
};
定时器=设置间隔（handleClick，30）；
}
函数三角形（x、y、颜色）{
这个.x=x；
这个。y=y；
这个颜色=颜色；
this.vx=Math.random（）*10-5；//5-3
this.vy=Math.random（）*10-5；
对于（变量i=0；icanvas.width | | t.x+t.vx<0）
t、 vx=-t.vx；
如果（t.y+t.vy>canvas.height | | t.y+t.vy<0）
t、 vy=-t.vy；
}
}
函数handleClick（x，y）{
clearRect（0,0，canvas.width，canvas.height）；
变量颜色=[‘红色’、‘绿色’、‘紫色’、‘蓝色’、‘黄色’]；
var color=colors[Math.floor（Math.random（）*colors.length）]；
三角形。推（新三角形（x，y，颜色））；
对于（i=0；i

我花了几分钟阅读了你的代码，发现了一件对我来说很突出的事情。首先，当您调用

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]);
        }
    }

函数handleClick（x，y）{
clearRect（0,0，canvas.width，canvas.height）；
变量颜色=[‘红色’、‘绿色’、‘紫色’、‘蓝色’、‘黄色’]；
var color=colors[Math.floor（Math.random（）*colors.length）]；
三角形。推（新三角形（x，y，颜色））；
triangles.shift（）；//这将删除数组中的第一个点，然后将所有其他数据点下移一个索引。
对于（i=0；i

如果我没有解释您的任何代码，或者您有后续问题，请告诉我。
我花了几分钟阅读了您的代码，发现了一个突出的问题。首先，当您调用
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]);
        }
    }

函数handleClick（x，y）{
clearRect（0,0，canvas.width，canvas.height）；
变量颜色=[‘红色’、‘绿色’、‘紫色’、‘蓝色’、‘黄色’]；
var color=colors[Math.floor（Math.random（）*colors.length）]；
三角形。推（新三角形（x，y，颜色））；
triangles.shift（）；//这将删除数组中的第一个点，然后将所有其他数据点下移一个索引。
对于（i=0；i

如果我错过了你的任何代码请告诉我，或者，如果您有后续问题。
虽然我对画布不太熟悉，但我认为您应该创建一个
重画
方法，该方法将首先清除画布，然后绘制所需的所有内容，并且在需要进行任何更改时，更改一些变量并调用重画整个画布的重画方法画布我认为您应该创建一个
redraw
方法，该方法将首先清除画布，然后绘制所需的所有内容，并且在需要进行任何更改时，更改一些变量并调用redraw方法来重绘整个画布。