html制作象棋教程入门教程,canvas 纯js 绘制中国象棋棋盘

chess();functionchess(){

let canvas= document.getElementById("chess");

let chess= canvas.getContext("2d");

let width=chess.canvas.width;

let height=chess.canvas.height;//单边长

let sidelen = 24;//左侧长度 = 竖直方向

let leftside = 4*sidelen;//顶部长度 = 水平方向

let topside = 8*sidelen;

chess.lineWidth= 2;for(let i=0; i<2; i++){

chess.save();

// 旋转平移得到下半部分

chess.rotate(i*Math.PI);

chess.translate(-i*(topside+sidelen/4-chess.lineWidth),-i*(2*leftside+sidelen));

//画一半的矩形框

drawChessRect(chess,sidelen);//画十字格

for(let x =0; x<5; x++){

drawTen(chess,sidelen/4,Math.PI/2,4,sidelen,x);

}for(let y =0; y<2; y++){

drawTenOther(chess,sidelen/4,Math.PI/2,4,sidelen,y);

}//米字格

drawMi(chess,sidelen);

chess.restore();

}

chess.font= "bold "+(sidelen/2+2)+"px microsoft yahei";

let fontArr = ["楚","河","汉","界"];//楚河 是 -Math.PI 旋转; 汉界 是 Math.PI 的旋转

for(let i=0; i

chess.save();

chess.beginPath();

chess.rotate(-Math.PI/2);

chess.translate(-5*sidelen,0);

chess.fillText(fontArr[i],4,sidelen*(1+2*i));

chess.closePath();

chess.restore();

}else{

chess.save();

chess.beginPath();

chess.rotate(Math.PI/2);

chess.translate(leftside,-topside);//因为此处 i 的取值是 2,3；会造成误差。所以要-2处理

chess.fillText(fontArr[i],6,sidelen*(1+2*(i-2)));

chess.closePath();

chess.restore();

}

}

}//米字格

functiondrawMi(ctx,sidelen){

ctx.save();

ctx.translate(3*sidelen,0);for(let i=0; i<2; i++){

ctx.rotate(i*Math.PI/2);

ctx.translate(0,-i*2*sidelen);

ctx.beginPath();

ctx.moveTo(0,0);

ctx.lineTo(2*sidelen,2*sidelen);

ctx.stroke();

ctx.closePath();

}

ctx.restore();

}//矩形框

functiondrawChessRect(ctx,len){

ctx.translate(2,2);for(let i=0; i<8;i++){for(let j=0; j<4; j++){

ctx.strokeRect(i*len,j*len,len,len);

}

}

}//十字格 drawMi 循环 5

functiondrawTen(ctx,milen,angle,minum,sidelen,x){

ctx.save();

ctx.translate(x*2*sidelen,3*sidelen);for(let i=0; i

drawTenLine(ctx,angle*i,milen);

}

ctx.restore();

}//十字格 循环 2 ；因为translate 无规律

functiondrawTenOther(ctx,milen,angle,minum,sidelen,y){

ctx.save();

ctx.translate((y*6+1)*sidelen,2*sidelen);for(let i=0; i

drawTenLine(ctx,angle*i,milen);

}

ctx.restore();

}//十字格线条

functiondrawTenLine(ctx,angle,milen){

ctx.save();

ctx.beginPath();

ctx.rotate(angle);

ctx.translate(ctx.lineWidth+1,ctx.lineWidth+1);

ctx.moveTo(milen,0);

ctx.lineTo(0,0);

ctx.lineTo(0,milen);

ctx.stroke();

ctx.closePath();

ctx.restore();

}