一、前台HTML中添加canvas（将width与height写入html中，放入css文件中显示的样式不一致）
<canvas id="mycanvas" class="chessboard" width="600px" height="600px">
二、css文件设置canvs样式
.chessboard
{
display: block;
margin: 50px auto;
box-shadow: -2px -2px 2px #EFEFEF,5px 5px 5px #B9B9B9;
}
三、Js文件绘制棋盘线条
/*绘制棋盘*/
function DrowChessBoard() {
var mycanvs=document.getElementById("mycanvas");
var ctx=mycanvs.getContext("2d");
ctx.strokeStyle="#BFBFBF";
for(i=0;i<19;i++)
{
/*横向线条*/
ctx.moveTo(30,30+i*30);
ctx.lineTo(570,30+i*30);
ctx.stroke();
/*纵向线条*/
ctx.moveTo(30+i*30,30);
ctx.lineTo(30+i*30,570);
ctx.stroke();
}
}
四、初始化时加载绘制棋盘函数
<body οnlοad="DrowChessBoard()">