Javascript clearRect不是正在清除画布

我正在开发一个游戏作为一个编码练习，我遇到了一个错误，每当我按下所选按钮时，我都找不到它。它不会删除形状并重新绘制一个形状。出于某种原因，它只是将形状保留在页面上并绘制一个新形状。我需要它来删除旧形状并重新绘制一个新形状 在这里输入代码

window.addEventListener（“加载”，函数（）{
功能清除（ctx、宽度、高度）{
}
函数形状（宽度、高度）{
//ctx.clearRect（0,0，canvas.width，canvas.height）
canvas.style.backgroundColor='白色'；
//var num=Math.floor（Math.random（）*10）
var数=30；
var countdown=setInterval（函数（）{
timerSpan.innerHTML=数字--；
//控制台日志（编号）
如果（数字==0-1）{
清除间隔（倒计时）；
}
},1000);
函数randomShape（）{
var randomNum=Math.floor（Math.random（）*10）；
//ctx.clearRect（0,0，canvas.width，canvas.height）
//如果（数字>0）{
如果（randomNum>=0&&randomNum 2&&randomNum=4&&randomNum 6&&randomNum<10）{
//ctx.clearRect（0,0，canvas.width，canvas.height）；
var whiteSquare=ctx.rect（50,70,90,90）；
whiteSquare+=ctx.fillStyle='red'；
whiteSquare+=ctx.fill（）；
文件.添加的文件列表器（'keyup'，函数形状（e）{
如果（e.keyCode==40）{
whiteSquare+=ctx.clearRect（0,0，ctx.canvas.width，ctx.canvas.height）；
文档。移除EventListener（“键控”，形状）；
随机形状（）；
}
});
}
console.log（随机数）
//};
}
随机形状（）；
}
//}, 1000);
函数drawGameStartText（宽度、高度、分数）{
宽度=170；
高度=350；
ctx.fillStyle='白色'；
ctx.font='30px Verdana'
ctx.fillText（'按空格键开始新游戏'，宽度，高度）；
}
功能重启游戏（ctx、宽度、高度）{
}
var canvas=document.getElementById（“形状游戏”），
高度=canvas.scrollHeight，
宽度=canvas.scrollWidth，
gameOn=false，
expectedKey=未定义，
ctx=canvas.getContext（'2d'），
//白色三角形=向上，红色正方形=向下，
//红色三角形=左侧，白色正方形=右侧
expectedKeysMap={white0:38，red1:40，red0:37，white1:39}；
timerSpan=document.getElementById（“剩余时间”）；
scoreSpan=document.getElementById（“score val”），
秒=3；
//有效期；
文件.附录列表（“键控”，功能（e）{
e、 预防默认值（）；
如果（e.keyCode==32）{
DrawShape（）；
}
});
drawGameStartText（）
})

正文{
填充底部：50px；
}
#形状游戏{
边框：4倍纯灰；
背景色：黑色；
}
.帆布容器{
填充：10px；
}
.canvas容器，#形状游戏{
高度：750px；
宽度：800px；
}
.分数{
填充：10px；
文本对齐：居中；
}
.传奇{
填充顶部：15px；
}
.图例内容{
文本对齐：左对齐；
左侧填充：30px；
}
.左下角三角形红色{
宽度：0；
身高：0；
边框底部：50px纯红；
右边框：50px实心透明；
}
.左下角三角形黑色{
宽度：0；
身高：0；
边框底部：54px纯黑；
右边框：58px实心透明；
}
.三角形内白{
位置：相对位置；
顶部：2个；
左：2px；
宽度：0；
身高：0；
边框底部：50px纯白；
右边框：50px实心透明；
}
.左三角形{
宽度：0；
身高：0；
边框顶部：23px实心透明；
边框底部：23px实心透明；
右边框：23px实心红色；
}
.内三角形{
位置：相对位置；
顶部：-20px；
左：2px；
宽度：0；
身高：0；
边框顶部：20px实心透明；
边框底部：20px实心透明；
右边框：20px纯蓝；
}
.红场{
宽度：50px；
高度：50px；
背景色：红色；
}
.白色广场{
宽度：50px；
高度：50px；
背景色：白色；
边框样式：实心；
边框宽度：1px；
}

形状！！
分数
0
计时器
30
传奇
左边
赖特
向上的
向下

您的代码有无数错误

首先，你为什么要这样做

因为它什么都不做

创建一个密钥处理程序并处理其中的所有内容，而不是

您只是在创建一堆密钥处理程序

如果要跟踪正在绘制的形状，请为每个形状创建一个数组

  const shapes = {
    whiteSquares : [],
    redSquares : [],
    whiteTriangle : [],
    redTriangle: [],  
  };

然后，在添加形状时，将其添加到相应的数组中

    if(randomNum <= 2){
      ctx.beginPath();
      ctx.lineTo(0, 0);
      ctx.lineTo(90, 90);
      ctx.lineTo(0, 90);
      ctx.closePath();
      ctx.fillStyle = "red";
      ctx.fill();
      shapes.redTriangle.push([0,0]); // store the top left of the triangle
    }

不要使条件语句过于复杂

你有

var randomNum=Math.floor（Math.random（）*10）；
如果（randomNum>=0&&randomNum 2&&randomNum=4&&randomNum 6&&randomNum<10）{
//做事
}

与

    var randomNum = Math.floor(Math.random() * 10);

    if (randomNum <= 2) { 
        // do stuff
    } else if(randomNum <= 4) { 
        // do stuff
    } else if(randomNum <= 6) { 
        // do stuff
    } else { 
        // do stuff
    }

var randomNum=Math.floor（Math.random（）*10）；
if（randomNum）你认为行
ctx.clearRect（0，0，ctx.canvas.width，ctx.canvas.height）是什么
是吗？你认为它会返回什么？按照你编写它的方式，它将清除整个画布。那么，我如何才能只清除形状呢？我看到很多被注释掉的
clearRect
是不是在你尝试放置它的地方，但它不起作用？是的，我尝试将它放置在不同的地方，没有任何效果，所以我来到这里你不需要。你每一帧都要重画。你可以尝试提出一些筛选优化来减少每一帧的重画量，但这远远超出了这个问题的范围。最简单的方法就是重画你的形状。一旦东西被画到画布上，它们就不再是东西了；它们是只是一个大的rgba值数组
    if(randomNum <= 2){
      ctx.beginPath();
      ctx.lineTo(0, 0);
      ctx.lineTo(90, 90);
      ctx.lineTo(0, 90);
      ctx.closePath();
      ctx.fillStyle = "red";
      ctx.fill();
      shapes.redTriangle.push([0,0]); // store the top left of the triangle
    }

  var gameStarted = false;
  const keyNames = {
    space : 32,
    left : 37;
    up : 38,
    right : 39,
    down : 40,
  }
  // only one key handler needed.
  document.addEventListener('keyup', e => {
    if(gameStarted === false && e.keyCode === keyNames.space) { 
      gameStarted = true;
      drawRandomShape();
    }else if(e.keyCode === keyNames.left) { 
      if(shapes.redTriangle.length > 0){
        var pos = shapes.redTriangle.shift(); // remove the bottom item in the array
        ctx.clearRect(pos[0],pos[1],90,90); // clear that position
        randomShape();  // create anothe shape.          
      }    
    }else if(e.keyCode === keyNames.right) { 
      if(shapes.whiteSquares.length > 0){
        // same as above
      }    
    }else if(e.keyCode === keyNames.up) { 
      if(shapes.whiteTriangle.length > 0){
        // same as above
      }
    }else if(e.keyCode === keyNames.down) { 
      if(shapes.redSquares.length > 0){
        // same as above
      }
    }
  }

    var randomNum = Math.floor(Math.random() * 10);

    if(randomNum >= 0 && randomNum <= 2){
        // do stuff
    }else if(randomNum > 2 && randomNum <= 4){
        // do stuff
    }else if(randomNum >= 4 && randomNum <= 6){
        // do stuff
    }else if(randomNum > 6 && randomNum < 10){
        // do stuff
    }

    var randomNum = Math.floor(Math.random() * 10);

    if (randomNum <= 2) { 
        // do stuff
    } else if(randomNum <= 4) { 
        // do stuff
    } else if(randomNum <= 6) { 
        // do stuff
    } else { 
        // do stuff
    }