                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JS实现人机大战之五子棋（UI篇）

棋盘格子出不来？

画线出不来？？

454167659

2016-07-25

源自：JS实现人机大战之五子棋（UI篇） 2-2

关注问题我要回答

1388

操作

收起

4 回答

454167659 提问者
2016-07-25

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

0 回复有任何疑惑可以回复我~

454167659 提问者
2016-07-25

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

1 回复有任何疑惑可以回复我~

454167659 提问者
2016-07-25

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

0 回复有任何疑惑可以回复我~

截灬慕彡
2016-07-25

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

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

0 回复有任何疑惑可以回复我~

举报

0/150

提交

取消

JS实现人机大战之五子棋（UI篇）

参与学习 35566 人
解答问题 136 个

利用js及canvas绘图知识，实现程序界面编写和交互逻辑处理

本课相似问答

2 回答棋盘格子画不出来

2 回答棋盘显示不出来

5 回答输出不了棋盘

4 回答为什么我的棋盘显示不出来？

1 回答棋子中小棋子出现的同事大棋子不会消失

搜索更多本课相关问答

棋盘格子出不来？

我要回答关注问题

意见反馈帮助中心 APP下载