                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /JS实现人机大战之五子棋（UI篇）

为什么我的棋子从来都是黑的，并且没有渐变

var chess=document.getElementById("chess");
var context=chess.getContext("2d");
context.strokeStyle="#BFBFBF";

//创建一个图片
var logo=new Image();
logo.src="logo.jpg";
logo.onload=function(){
	context.drawImage(logo,0,0,450,450);
	drawchessBoard();
	//oneStep();
	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, 13, 15 + i*30+2, 15 + j*30-2, 4);

	if(me){//如果是黑棋
		gradient.addColorStop(0, "#fff");//"#0A0A0A""#636766"
		gradient.addColorStop(1, "red");
	}
	else{
		gradient.addColorStop(0, "#D1D1D1");
		gradient.addColorStop(1, "#F9F9F9");
	}
	gradient.fillStyle=gradient;
	context.fill();
}