不顯示棋盤和水印,但是只顯示棋子,不知道為什么,求大神幫忙一下
var me = true;
var chessBoard = [];
for(var i = 0; i<15; i++) {
? ? chessBoard[i] = [];
? ? for(var j=0; j<15; j++) {
? ? ? ? chessBoard[i][j] = 0;
? ? }
}
var chess = document.getElementById('chess');
var context = chess.getContext('2d');
context.strokeStyle= "#eee";
var logo = new Image();
logo.src = "logo.png";
logo.onload = function(){
? ? context.drawImage(logo, 0,0,450,450);
? ? drawChessBoard();
? ? oneStep(1,1,true);
? ? oneStep(0,0,false);
}
var drawChessBoard = function(){
for(var i = 0; i < 15 ; i++){
? ? context.moveTo( 15+30*i, 15);
? ? context.lineTo(15+30*i, 435);
? ? context.stroke();
? ? context.moveTo(15, 15+30*i);
? ? context.lineTo(435, 15+ 30*i);
? ? 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,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();
}
chess.onclick = function(e) {
? ? var x = e.offsetX;
? ? var y = e.offsetY;
? ? var i = Math.floor(x / 30);
? ? var j = Math.floor(y / 30);
? ? if(chessBoard[i][j] == 0) {
? ? ? ? oneStep(i, j, me);
? ? ? ? if(me) {
? ? ? ? ? ? chessBoard[i][j] = 1;
? ? ? ? }else{
? ? ? ? ? ? chessBoard[i][j] = 2;
? ? ? ? }
? ? ? ? me = !me;
? ? }
}