坐标单元格在确定位置的时候很有作用,下面附上绘制坐标单元格的代码:(当然以下的参数都是可以自定义的)
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>
效果图为: