Canvas图形绘制---ChessBoard
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
body{ text-align:center}
.div{ margin:0 auto; width:400px; height:100px; border:1px solid #fff}
/* css注释：为了观察效果设置宽度 边框 高度等样式 */
</style>
</head>
<body>
<div class="div"><h1>Hello Chess</h1></div>
<canvas id="canvas" style="display:block;margin:0 auto;border:1px solid #aaa"></canvas>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
var image = new Image();
window.onload = function(){
canvas.width = 1000;
canvas.height = 1000;
for(var i=0;i<canvas.height/100;i++){
for(var j=0;j<canvas.width/100;j++) {
if(i%2==0&&j%2==0){
context.fillRect(i * 100, j * 100, 100, 100);
}else if(i%2==1&&j%2==1){
context.fillRect(i * 100, j * 100, 100, 100);
}
}
}
}
</script>
</body>
</html>
