Skip to content

Instantly share code, notes, and snippets.

@yanhua365

yanhua365/chess-bg.html

Created December 11, 2013 14:04
Show Gist options
  • Save yanhua365/7910959 to your computer and use it in GitHub Desktop.
Save yanhua365/7910959 to your computer and use it in GitHub Desktop.
Download ZIP
用Canvas画的象棋棋盘
Raw
chess-bg.html
<!doctype html>
<html>
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<title>canvas 象棋 </title>
</head>
<body>
<canvas id="chess-canvas" width="410" height="460"></canvas>
<script>
var layout = {
offsetWidth: 410,
offsetHeight: 460,
padding:5,
cell:50,
width:400,
height:450,
board:{
border:'#09f'
}
};
var canvas = document.getElementById("chess-canvas");
var ctx = canvas.getContext("2d");
// draw background
ctx.fillStyle='#9cf';
ctx.beginPath();
ctx.rect(0, 0, layout.offsetWidth, layout.offsetHeight);
ctx.fill();
ctx.closePath();
// prepare to draw lines
var p = layout.padding,
s = layout.cell,
w = layout.width,
h = layout.height;
ctx.strokeStyle='#000';
ctx.lineWidth=2;
ctx.beginPath();
// horizonal lines
for(var i = 0; i < 10; i++){
ctx.moveTo(p, s * i + p);
ctx.lineTo(w + p, s * i + p);
}
// vertical lines
ctx.moveTo(p, p);
ctx.lineTo(p, h + p);
ctx.moveTo(w + p, p);
ctx.lineTo(w + p, h + p);
for(var i = 1; i < 8; i++){
ctx.moveTo(s * i + p, p);
ctx.lineTo(s * i + p, s * 4 + p);
ctx.moveTo(s * i + p, s * 5 + p);
ctx.lineTo(s * i + p, h + p);
}
// "X" shapes
ctx.moveTo(s * 3 + p, p);
ctx.lineTo(s * 5 + p, s * 2 + p);
ctx.moveTo(s * 5 + p, 0 + p);
ctx.lineTo(s * 3 + p, s * 2 + p);
ctx.moveTo(s * 3 + p, s * 7 + p);
ctx.lineTo(s * 5 + p, s * 9 + p);
ctx.moveTo(s * 5 + p, s * 7 + p);
ctx.lineTo(s * 3 + p, s * 9 + p);
ctx.stroke();
ctx.closePath();
// 楚河汉界
//ctx.font='宋体';
ctx.fillStyle='#000';
ctx.textAlign="center";
ctx.textBaseline="middle";
ctx.fillText("楚河", p + s * 2, p + s * 4.5);
ctx.fillText("漢界", p + s * 6, p + s * 4.5);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment