var chess =document.getElementById("chess");

var context=chess.getContext("2d");

var chessBoard=[];

var me=true;

for(var i=0;i<15;i++){

chessBoard[i]=[];

for(var j=0;j<15;j++)

chessBoard[i][j]=0;

}

context.strokeStyle="#BFBFBF";

var logo=new Image();

logo.src ="\logobg.jpg";//载入图片

logo.onload=function(){

context.drawImage(logo,0,0,450,450);

drawChessBoard();

onStep(0,0,true);

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

}

}

                                   //i,j指索引，me表示黑棋白棋

var oneStep=function(i,j,me){  //此处i,j 间多了逗号

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);//你这里渐变圆的半径弄太大了，建议将第一个圆半径设为8或9，第二个渐变圆半径设为5或6，效果会更好

       if(me){

        gradient.addColorStop(0,"#0A0A0A");

        gradient.addColorStop(1,"#636766");

       }else {

        gradient.addColorStop(0,"#D1D1D1");

        gradient.addColorStop(1,"#F9F9F9");

}

context.fillStyle=gradient;

context.fill();//填充//context.stroke();描边

}

chess.onclick=function(e){

var x=Math.floor(e.offsetX/30);

var y=Math.floor(e.offsetY/30);

if(chessBoard[x][y]==0){

oneStep(x,y,me);

if(me)

chessBoard[x][y]=1;

else

chessBoard[x][y]=2;

me=!me; //结束时交换落子颜色

}

}

// 鼠标触发事件你再仔细看看视频吧