<script type="text/javascript"> ? ?var canvas=document.getElementById("canvas"); ? ?var ?context=canvas.getContext("2d"); ? ?context.strokeStyle="#bbb";//設置線條的顏色 ? ?//繪制棋盤的方法 ? ?var ?drawChessBoard=function(){ ? ? ? ?//繪制兩點 ? ? ? ?for(var i=0;i<15;i++){ ? ? ? ? ? ?context.moveTo(15+i*30,15);//起點（x,y） ? ? ? ? ? ?context.lineTo(15+i*30,435);//終點 ? ? ? ? ? ?context.stroke();//連接 ? ? ? ? ? ?context.moveTo(15,15+i*30); ? ? ? ? ? ?context.lineTo(435,15+i*30); ? ? ? ? ? ?context.stroke(); ? ? ? ?}; ? ?}; ? ?drawChessBoard(); ? ?//繪制棋子 ? ?var onStep=function(i,j,me){ ? ? ? ?context.beginPath();//開始路徑 ? ? ? ?context.arc(15+i*30,15+j*30,13,0,Math.PI*2);//畫圓 ? ? ? ?context.closePath();//結束路徑 ? ? ? ?context.stroke(); ? ? ? ?var ?Gradient=context.createRadialGradient(15+i*30,15+j*30,13,15+i*30,15+j*30,0);//設置漸變色 ? ? ? ?if(me){ ? ? ? ? ? ?Gradient.addColorStop(0,"#000"); ? ? ? ? ? ?Gradient.addColorStop(1,"#999"); ? ? ? ? ? ?//context.fillStyle="#000";//填充顏色 ? ? ? ?}else{ ? ? ? ? ? ?Gradient.addColorStop(0,"#d11822"); ? ? ? ? ? ?Gradient.addColorStop(1,"#f365bc"); ? ? ? ? ? ?//context.fillStyle="#fff";//填充顏色 ? ? ? ?} ? ? ? ?context.fillStyle=Gradient; ? ? ? ?context.fill();//填充 ? ?}; ? ?//onStep(0,0,true); ? // onStep(1,1,false); ? ?//下棋 ? ?chess.onclick = function(e){ ? ? ? ?var x = e.clientX; ? ? ? ?var y = e.clientY; ? ? ? ?console.log(e); ? ? ? ?console.log(x); ? ? ? ?console.log(y); ? ?}</script>