var chess = document.getElementById('chess');
var context = chess.getContext('2d');

context.strokeStyle = "#BFBFBF";

var logo = new Image();
logo.src = "img/logo.png";
logo.onload = function(){
? ?context.drawImage(logo, 0, 0, 450, 450); /*onload圖片加載完成再drawimage*/
? ?drawChessBoard(); /*防止水印在棋盤上面顯示，所以把棋盤封裝為一個(gè)函數(shù)*/

? ?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, 8, 15 + i*30 + 2, 15 + j*30 - 2, 5); /*外面圓到里面圓漸變,圓心坐標(biāo)和半徑*/
? ?if(me){
? ? ? ?gradient.addColorStop(0, "#0A0A0A"); ?/*0-1百分比*/
? ? ? ?gradient.addColorStop(1, "#636766");
? ?} else{
? ? ? ?gradient.addColorStop(0, "#D1D1D1"); ?/*0-1百分比*/
? ? ? ?gradient.addColorStop(1, "#F9F9F9");
? ?}
? ?context.fillstyle = gradient;
? ?context.fill();

}