Canvas绘制五子棋棋盘

一、前台HTML中添加canvas（将width与height写入html中，放入css文件中显示的样式不一致）

      

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

    }

}

四、初始化时加载绘制棋盘函数