Question

如果按下重置按钮，我希望画布再次变为白色并再次绘制线条。我无法弄清楚它为什么不起作用。有人可以帮帮我吗？

＆＃13;

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();

＆＃13;

<!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>

＆＃13;

Answer 1

最简单的方法是清除画布和重绘网格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检测点击：

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

否则，按钮上的点击也会被检测为窗口中的点击。

<强> Updated fiddle

重置画布按钮不起作用

1 个答案: