var chess = document.getElementById('chess');
var context = chess.getContext('2d');

context.strokeStyle = "#BFBFBF";

var logo = new Image();
logo.src = "img/logo.png";
logo.onload = function(){
   context.drawImage(logo, 0, 0, 450, 450); /*onload图片加载完成再drawimage*/
   drawChessBoard(); /*防止水印在棋盘上面显示，所以把棋盘封装为一个函数*/

   oneStep(0, 0, true);
   oneStep(1, 1, false);

}
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();
   }
}
var oneStep = function(i, j, me){
   context.beginPath();
   context.arc(15 + i*30, 15 + j*30, 13, 0, 2*Math.PI);
   context.closePath();
   var gradient = context.createRadialGradient(15 + i*30 + 2, 15 + j*30 - 2, 8, 15 + i*30 + 2, 15 + j*30 - 2, 5); /*外面圆到里面圆渐变,圆心坐标和半径*/
   if(me){
       gradient.addColorStop(0, "#0A0A0A");  /*0-1百分比*/
       gradient.addColorStop(1, "#636766");
   } else{
       gradient.addColorStop(0, "#D1D1D1");  /*0-1百分比*/
       gradient.addColorStop(1, "#F9F9F9");
   }
   context.fillstyle = gradient;
   context.fill();

}