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();
}
