<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02Canvas案例-绘制表格</title>
</head>
<body>
<div id="container">
<canvas id="cavsElem">
你的浏览器不支持canvas，请升级浏览器
</canvas>
</div>
<script>
(function(){
var canvas=document.querySelector('#cavsElem');
var ctx=canvas.getContext('2d');
canvas.width=600;
canvas.height=600;
canvas.style.border='1px solid green';
var rectH=10;
var rectW=20;
ctx.lineWidth=.5;
//绘制表格
// 第一步： 绘制横线
for(var i=0;i<canvas.width;i++){
ctx.moveTo(rectW*i,0);
//如果不设置moveTo，当前画笔没有位置
ctx.lineTo(rectW*i,canvas.height);
}
//第二步：绘制竖线：如果绘制的格子的宽高相等，可以将for循环放到一个里面；
for(var i=0;i<canvas.height;i++){
ctx.moveTo(0,rectH*i);
ctx.lineTo(canvas.width,rectH*i);
}
ctx.stroke();
}())
</script>
</body>
</html>