JavaScript编写人机对战五子棋(四)

//获取canvas对象
var chess = document.getElementById('chess');
//获取canvas上下文
var ctx = chess.getContext('2d');
//背景图
var back = new Image();
back.src = "img/back.jpg";

//绘制棋盘
function drawChessBoard(context){
back.onload = function(){
context.drawImage(back,0,0,450,450);
for (var i=0;i<15;i++) {
context.strokeStyle = 'black';
context.moveTo(15+i*30,15);
context.lineTo(15+i*30,435);
context.stroke();
context.beginPath();
context.moveTo(15,15+i*30);
context.lineTo(435,15+i*30);
context.stroke();

}
drawChessPiece(context,7,8,true);
drawChessPiece(context,7,7,false)
drawChessPiece(context,8,8,false)
}

}
//绘制棋子
function drawChessPiece(context,i,j,me){
context.beginPath();
context.arc(15+30*i,15+30*j,13,0,2*Math.PI);
context.closePath();
var gradient = context.createRadialGradient(15+30*i+2,15+30*j-2,13,15+30*i+2,15+30*j-2,0);
if(me){
gradient.addColorStop(0,"#0A0A0A");
gradient.addColorStop(1,"#636766");
}else{
gradient.addColorStop(0,"#D1D1D1");
gradient.addColorStop(1,"#F9F9F9");
}
context.fillStyle = gradient;
context.fill();
}
//启动方法
function start(){
drawChessBoard(ctx);

}