画布在事件侦听器上消失

尼姆罗德·奈姆（Nimrod Naim）

我正在尝试创建一个可在乒乓球游戏的按键上移动的rect，当我按下该键时，左rect消失。这真的很重要。代码是用普通的javascript编写的，所以请不要编写jQuery。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Pong</title>
    <script type="text/javascript">
        var x = 100;
        var y = 100;
        var xmoveFirst = 720;
        var ymoveFirst = 0;
        var xmoveSecond = 30  ;
        var ymoveSecond = 0;
        function canvas() {
            var can = document.getElementById('theCanvas');
            can.style.backgroundColor = "black";
            var ctx = can.getContext('2d');
            
            //first player
            ctx.fillStyle="white";
            ctx.fillRect(xmoveFirst,ymoveFirst,5,75);
            
            //second player
            ctx.fillStyle = 'white';
            ctx.fillRect(xmoveSecond,ymoveSecond,5,75);
            
            //first player move
            function moveFirst(eFirst) {
                ctx.clearRect(0,0,750,750); //clear rects
                if (eFirst.keyCode == 40) {
                    ymoveFirst+=25;
                    console.log("first,"+ymoveFirst);
                }
                
                else if (eFirst.keyCode == 38) {
                    ymoveFirst-=25;
                    console.log("first,"+ymoveFirst);
                }
                ctx.fillStyle="white";
                ctx.fillRect(xmoveFirst,ymoveFirst,5,75);
                ctx.fillRect(xmoveSecond,ymoveSecond,5,75);

            }
            var first = document.onkeydown = moveFirst;
            
          //second player move
            
            function moveSecond(eSecond) {
                ctx.clearRect(0,0,750,750);
                if (eSecond.keyCode == 83) {
                    ymoveSecond+=25;
                    console.log("second,"+ymoveSecond);
                }
                
                else if (eSecond.keyCode == 87) {
                    ymoveSecond-=25;  
                }
                
                ctx.fillStyle="white";
                ctx.fillRect(xmoveFirst,ymoveFirst,5,75);
                ctx.fillRect(xmoveSecond,ymoveSecond,5,75);
                console.log("second,"+ymoveSecond)
            }
            
            var second = document.onkeydown = moveSecond;
        }
      
            
        83,87
    </script>
</head>
<body onload="canvas()">
    <canvas id="theCanvas" width="750" height="750"></canvas>
</body>
</html>

他们好美

此行：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);
}

另外，更换