Javascript 事件侦听器上的画布消失

我正在尝试创建一个矩形，它可以在乒乓球游戏的按键上移动，当我按下该键时，左矩形消失。。 有没有办法解决这个问题？这真的很重要。。 代码是用普通javascript编写的，所以请不要编写jQuery

庞
var x=100；
变量y=100；
var xmoveFirst=720；
var ymoveFirst=0；
var xmoveSecond=30；
var ymoveSecond=0；
函数画布（）{
var can=document.getElementById（'theCanvas'）；
can.style.backgroundColor=“黑色”；
var ctx=can.getContext（'2d'）；
//第一名选手
ctx.fillStyle=“白色”；
ctx.fillRect（xmoveFirst，ymoveFirst，5,75）；
//替补队员
ctx.fillStyle='白色'；
ctx.fillRect（xmoveSecond，ymoveSecond，5,75）；
//第一步
函数moveFirst（eFirst）{
ctx.clearRect（0,0750750）；//clear rect
如果（eFirst.keyCode==40）{
ymoveFirst+=25；
console.log（“第一，”+ymovfirst）；
}
else if（eFirst.keyCode==38）{
ymoveFirst-=25；
console.log（“第一，”+ymovfirst）；
}
ctx.fillStyle=“白色”；
ctx.fillRect（xmoveFirst，ymoveFirst，5,75）；
ctx.fillRect（xmoveSecond，ymoveSecond，5,75）；
}
var first=document.onkeydown=moveFirst；
//二传
函数移动秒（eSecond）{
ctx.clearRect（0,0750750）；
if（eSecond.keyCode==83）{
i秒+=25；
console.log（“第二，”+ymovessecond）；
}
else if（eSecond.keyCode==87）{
ymoveSecond-=25；
}
ctx.fillStyle=“白色”；
ctx.fillRect（xmoveFirst，ymoveFirst，5,75）；
ctx.fillRect（xmoveSecond，ymoveSecond，5,75）；
log（“第二，”+ymovessecond）
}
var second=document.onkeydown=moveSecond；
}
83,87

此行：

can.width=can.width重置画布宽度

更改画布大小（宽度或高度）时，清除画布（使所有内容变为黑色）。在这一行之后，您只需要重新绘制最右边的划桨，因此左侧的划桨仍然缺失

如果你想让它回来，你也需要重新画最左边的桨。下面是修改后的moveRight（）函数：

function moveRight(eFirst) {
  if (eFirst.keyCode==40) {
    ymoveFirst+=25;
    console.log(ymoveFirst);
  }

  else if (eFirst.keyCode==38) {
    ymoveFirst-=25;
    console.log(ymoveFirst);
  }
  can.width=can.width;
  ctx.fillStyle="white";

  // Redraw BOTH paddles
  ctx.fillRect(xmoveFirst,ymoveFirst,5,75);
  ctx.fillRect(xmoveSecond,ymoveSecond,5,75);
}

另外，替换


document.onkeydown=moveFirst和
document.onkeydown=moveSecond


与


document.addEventListener（“键下”，移动优先）
和
文档。addEventListener（“向下键”，移动秒）


当前，您正在使用
document.onkeydown=moveSecond覆盖第一个侦听器。通过使用
addEventListener
，您不会覆盖已经存在的列表。
此行：
can.width=can.width重置画布宽度

更改画布大小（宽度或高度）时，清除画布（使所有内容变为黑色）。在这一行之后，您只需要重新绘制最右边的划桨，因此左侧的划桨仍然缺失

如果你想让它回来，你也需要重新画最左边的桨。下面是修改后的moveRight（）函数：

function moveRight(eFirst) {
  if (eFirst.keyCode==40) {
    ymoveFirst+=25;
    console.log(ymoveFirst);
  }

  else if (eFirst.keyCode==38) {
    ymoveFirst-=25;
    console.log(ymoveFirst);
  }
  can.width=can.width;
  ctx.fillStyle="white";

  // Redraw BOTH paddles
  ctx.fillRect(xmoveFirst,ymoveFirst,5,75);
  ctx.fillRect(xmoveSecond,ymoveSecond,5,75);
}

另外，替换


document.onkeydown=moveFirst和
document.onkeydown=moveSecond


与


document.addEventListener（“键下”，移动优先）
和
文档。addEventListener（“向下键”，移动秒）


当前，您正在使用
document.onkeydown=moveSecond覆盖第一个侦听器。通过使用
addEventListener
，您不会覆盖已经存在的按钮。
左侧按钮的键代码为37，无论如何，在执行
can.width=can.width
内部
moveRight（）
（通过chrome调试器检查）后，rect立即消失，我想知道为什么：Othere是另一种方法，而不是can.witdh=can.width用于清除？如果你想清除画布，那么在清除中，我的意思是画布将移动，但仍然保持相同的高度，我的意思是：
can.width=can.width
类似于
x=x
（其中x已经定义），这应该是一个无用的声明，它什么也不做，但它使rect消失！！！左按钮的键码是37，无论如何，在执行
can.width=can.width
inside
moveRight（）
（通过chrome调试器检查）后，rect立即消失，我想知道为什么：Othere是另一种方法，而不是can.witdh=can.width用于清除？如果你想清除画布，那么在清除中，我的意思是画布将移动，但仍然保持相同的高度，我的意思是：
can.width=can.width
类似于
x=x
（其中x已经定义），这应该是一个无用的声明，它什么也不做，但它使rect消失！！！我还有一个问题。。现在，只有第二个函数起作用。。我编辑了主要问题我已经回答了你的第二个问题。将来如果你有更多的问题，你应该提出一个新问题。。现在，只有第二个函数起作用。。我编辑了主要问题我已经回答了你的第二个问题。将来如果你有更多的问题，你应该提出一个新的问题。