canvas 的重置按钮不起作用

Question

如果按下重置按钮，我希望 canvas 再次变白并再次绘制线条。我不知道为什么它不起作用。有人可以帮助我吗？

var mouseX; 
var mouseY;
var player1 = true;
var slots = new Array(false, false, false, false, false, false, false, false, false);

function doFirst() { 
  var x = document.getElementById('canvas'); 
  canvas = x.getContext('2d'); canvas.fillRect(250,0,33,816); 
  canvas.fillRect(533,0,33,816); canvas.fillRect(0,250,816,33); 
  canvas.fillRect(0,533,816,33);
  
 canvas.font="bold 150px Tahoma";
  canvas.textAlign="center";
  
  x.addEventListener('mousemove', function(event) {
     mouseX = event.clientX;
     mouseY = event.clientY;
     var status = document.getElementById('status');
    status.innerHTML = mouseX+" | "+mouseY;

    return mouseX + mouseY;
 });
}
/*------------------------------------------------------------*/
 window.addEventListener("click", change, false);
 function change() {
 if(mouseX>=0 && mouseX<=250 && mouseY>=0 && mouseY<=250){
  if(player1==true && slots[0]==false){
      canvas.fillText("X", 125, 170);
      player1=false;
      slots[0]=true;
    }
    else if(player1==false && slots[0]==false){
      canvas.fillText("O", 125, 170);
      player1=true;
      slots[0]=true;
    }
 }
 
 if(mouseX>=283 && mouseX<=533 && mouseY>=0 && mouseY<=250){
  if(player1==true && slots[1]==false){
      canvas.fillText("X", 408, 170);
      player1=false;
      slots[1]=true;
    }
    else if(player1==false && slots[1]==false){
      canvas.fillText("O", 408, 170);
      player1=true;
      slots[1]=true;
    }
 }
 
 if(mouseX>=566 && mouseX<=816 && mouseY>=0 && mouseY<=250){
  if(player1==true && slots[2]==false){
      canvas.fillText("X", 691, 170);
      player1=false;
      slots[2]=true;
    }
    else if(player1==false && slots[2]==false){
      canvas.fillText("O", 691, 170);
      player1=true;
      slots[2]=true;
    }
 }
 
 if(mouseX>=0 && mouseX<=250 && mouseY>=283 && mouseY<=533){
  if(player1==true && slots[3]==false){
      canvas.fillText("X", 125, 453);
      player1=false;
      slots[3]=true;
    }
    else if(player1==false && slots[3]==false){
      canvas.fillText("O", 125, 453);
      player1=true;
      slots[3]=true;
    }
 }
 
 if(mouseX>=283 && mouseX<=533 && mouseY>=283 && mouseY<=533){
  if(player1==true && slots[4]==false){
      canvas.fillText("X", 408, 453);
      player1=false;
      slots[4]=true;
    }
    else if(player1==false && slots[4]==false){
      canvas.fillText("O", 408, 453);
      player1=true;
      slots[4]=true;
    }
 }
 
 if(mouseX>=566 && mouseX<=816 && mouseY>=283 && mouseY<=533){
  if(player1==true && slots[5]==false){
      canvas.fillText("X", 691, 453);
      player1=false;
      slots[5]=true;
    }
    else if(player1==false && slots[5]==false){
      canvas.fillText("O", 691, 453);
      player1=true;
      slots[5]=true;
    }
 }

 if(mouseX>=0 && mouseX<=250 && mouseY>=566 && mouseY<=816){
  if(player1==true && slots[6]==false){
      canvas.fillText("X", 125, 736);
      player1=false;
      slots[6]=true;
    }
    else if(player1==false && slots[6]==false){
      canvas.fillText("O", 125, 736);
      player1=true;
      slots[6]=true;
    }
 }
 
 
 if(mouseX>=283 && mouseX<=533 && mouseY>=566 && mouseY<=816){
  if(player1==true && slots[7]==false){
      canvas.fillText("X", 408, 736);
      player1=false;
      slots[7]=true;
    }
    else if(player1==false && slots[7]==false){
      canvas.fillText("O", 408, 736);
      player1=true;
      slots[7]=true;
    }
 }
 
 
 if(mouseX>=566 && mouseX<=816 && mouseY>=566 && mouseY<=816){
  if(player1==true && slots[8]==false){
      canvas.fillText("X", 691, 736);
      player1=false;
      slots[8]=true;
    }
    else if(player1==false && slots[8]==false){
      canvas.fillText("O", 691, 736);
      player1=true;
      slots[8]=true;
    }
 }

}

doFirst();

<!DOCTYPE html>

<html>
 <head>
 <link type="text/css" rel="stylesheet" href="main.css"/>
 <script src="main.js"></script>
  <title>Boter, kaas en eieren!</title>
 </head>
 <body>
  
  <canvas id="canvas" height="816" width="816" >
  Als je dit ziet, download google chrome
  </canvas>
  
  <h2 id="status">0 | 0</h2>
  
 </body>
</html>

Answer 1

最简单的方法就是清除canvas和重绘网格jsfiddle，但也必须重新设置slots

function clear() {
  canvas.clearRect(0,0,816,816);
  canvas.fillRect(250,0,33,816); 
  canvas.fillRect(533,0,33,816);
  canvas.fillRect(0,250,816,33); 
  canvas.fillRect(0,533,816,33);

  slots = [false, false, false, false, false, false, false, false, false];
}

更新 - 解决第二个问题，替换这一行 -

window.addEventListener("click", change, false);

有了这个，使用 canvas 来检测点击：

canvas.addEventListener("click", change, false);

否则点击按钮也会被检测为点击 window。

Updated fiddle.

canvas 的重置按钮不起作用

Reset button for canvas not working

javascript

html

html5-canvas