CANVAS应用-中国象棋
body{margin: 0;padding: 0;}
#div1{width:620px;height:620px;margin: 0 auto;margin-top: 50px;border: 2px solid #f00;}
#div2{width:605px;height:120px;margin:0 auto;margin-top:10px;border: 2px solid #ccc;}
function canvas1id(){
var canvas=document.getElementById("canvas1");
var hb=canvas.getContext("2d");
canvas.width=620;canvas.height=620;
hb.lineWidth=5;
hb.strokeStyle="#000";
hb.strokeRect(30,30,560,560); //外方框
hb.lineWidth=1;
for(var i=1;i<9;i++) {
if (i > 4) {
hb.moveTo(30, i * 60 + 50);
hb.lineTo(590, i * 60 + 50);
}
else {
hb.moveTo(30, i * 60+30);
hb.lineTo(590, i * 60+30);
}
} //画棋盘横线
for(var i=1;i<8;i++){
hb.moveTo(i*70+30,30);hb.lineTo(i*70+30,270);hb.moveTo(i*70+30,350);hb.lineTo(i*70+30,590);
} //画棋盘竖线
hb.moveTo(240,30);hb.lineTo(380,150);hb.moveTo(380,30);hb.lineTo(240,150);
hb.moveTo(240,590);hb.lineTo(380,470);hb.moveTo(380,590);hb.lineTo(240,470);
hb.stroke(); //画交叉线
hb.font = 'bold 60px arial';
hb.fillText("楚河",80,330);hb.fillText("汉界",420,330); //写汉字
canvas2id();
}
function canvas2id(){
var canvas=document.getElementById("canvas2");
var qh=canvas.getContext("2d");
canvas.width=605;canvas.height=120;
qh.lineWidth=1;qh.strokeStyle="#000";
for(i=0;i<8;i++){
qh.arc(40+75*i, 60, 35, 0, 360);
qh.moveTo((i+2)*75,60);
}
qh.stroke();
qh.font='bold 50px arial';
var qz=["将","仕","相","马","车","炮","兵","兵"];
for(i=0;i<8;i++){
qh.fillText(qz[i],15+75*i,75);
}
canvas3id();
}