用canvas實現繪製座標單元格

時間 2019-12-07

標籤 canvas 實現繪製座標單元格简体版

原文原文鏈接

座標單元格在肯定位置的時候頗有做用,下面附上繪製座標單元格的代碼:(固然如下的參數都是能夠自定義的)html

 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>

效果圖爲:canvas

相關標籤/搜索