用canvas实现绘制坐标单元格

坐标单元格在确定位置的时候很有作用,下面附上绘制坐标单元格的代码:(当然以下的参数都是可以自定义的)

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>绘制坐标网格</title>
 6     <style>
 7         canvas {
 8             border: 1px solid red;
 9         }
10     </style>
11 </head>
12 <body>
13 <canvas width="500" height="400" id="can">1123</canvas>
14 <script>
15     var can = document.getElementById ( "can" );
16     var cas = can.getContext ( '2d' );
17 
18     var w = 10;//单元格规格
19     var x = can.height / w;//行数
20     var y = can.width / w;//列数
21 
22     for ( var i = 0 ; i < x ; i ++ ) {//控制行数
23         for ( var j = 0 ; j < y ; j ++ ) {//控制列数
24             //绘制行
25             cas.moveTo ( j * w , (i + 1) * w );
26             cas.lineTo ( j * w + w , (i + 1) * w );
27             //绘制列
28             cas.lineTo ( (j + 1) * w , i * w );
29 //          cas.lineTo ((i+1)*w,j*w);   //可以试下这个效果哦,感觉怎么样的呢!
30 
31         }
32     }
33     cas.strokeStyle='blue';
34     cas.stroke ();
35 </script>
36 </body>
37 </html>

效果图为:

★★前端新手一枚,写的内容是自己对知识点的理解,如有不妥之处,还请各位大牛不吝赐教,批评指正.谢谢★★