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(); }
后来自己看出来了 是46行那里写错了。应该是context.fillStyle=gradient;
因为你传的一直是true啊,当然一直是黑的,onestep(0,0,true),你在下面少加了一句me=!me,渐变不知道,没看出什么毛病。