棋盘格子出不来？

个回答

454167659: 2016-07-25 18:48:58

for(var i = 0; i < 15; i++) {
		context.moveTo(15 + i * 30, 15);
		context.lineTo(15 + i * 30, 435);
		context.stroke();
		context.moveTo(15, 15 + i * 30);
		context.lineTo(435, 15 + i * 30);
		context.stroke();

454167659

2016-07-25 18:46:23

宽度设置错了，起点和终点一样了。。。。

1

454167659: 2016-07-25 18:42:08

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>五子棋大战</title>
		<link rel="shortcut icon" href="//static.segmentfault.com/global/img/favicon.eee09a32.ico" type="image/x-icon" />
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		
	</head>
	<body>
		<canvas id="chess" width="450px" height="450px"></canvas>
		<script type="text/javascript" src="js/script.js" ></script>
	</body>
</html>



#chess{
	display: block;
	margin:0 auto;
	box-shadow: -2px -2px 2px #EFEFEF,5px 5px 5px #B9B9B9;
}



window.onload = function() {
	var chess = document.getElementById('chess');
	var context = chess.getContext('2d');
	context.strokeStyle = "#BFBFBF";
	for(var i = 0; i < 15; i++) {
		context.moveTo(15 + i * 30, 15);
		context.lineTo(15 + i * 30, 15);
		context.stroke();
		context.moveTo(15, 15 + i * 30);
		context.lineTo(15, 15 + i * 30);
		context.stroke();
	}
}

截灬慕彡: 2016-07-25 18:35:54

麻烦给个代码，是不是被背景图片覆盖了啊，这是棋盘格子代码

var drawChessBoard = function(){
    for(var i=0;i<15;i++){
        context.moveTo(15+i*30,15);
        context.lineTo(15+i*30,435);
        context.stroke();
        context.moveTo(15,15+i*30);
        context.lineTo(435,15+i*30);
        context.stroke();
    }
}