javascript绘制五子棋棋子

javascript文件中添加绘制棋子代码

1）参数pos为棋子的圆心坐标

2）全局变量ChessType表示棋子的类型，等于ture时绘制黑色棋子，等于false绘制白色棋子

3）createRadialGradient设置棋子渐变颜色

/*绘制棋子*/

function DrowChess(pos) {
    var mycanvs=document.getElementById("mycanvas");
    var ctx=mycanvs.getContext("2d");
    ctx.beginPath();
    ctx.arc(pos[0],pos[1],15,0,2*Math.PI);
    var chessstyle=ctx.createRadialGradient(pos[0]+2,pos[1]-2,15,pos[0]+2,pos[1]-2,1);
    /* chesstype true 为黑子*/
    if(ChessType)
    {chessstyle.addColorStop(0,"#0A0A0A");
     chessstyle.addColorStop(1,"#636766");
    }
    else{chessstyle.addColorStop(0,"#D1D1D1");
    chessstyle.addColorStop(1,"#F9F9F9");
  }
    ctx.fillStyle=chessstyle;
    ctx.fill();
    ctx.closePath(); 
    ChessType=!ChessType;

}