Canvas 绘制网格Grid

Posted 2021-03-15 coffeeeddy

 1 var myCanvas = document.querySelector(‘canvas‘);
 2         var ctx = myCanvas.getContext(‘2d‘);
 3 
 4         let gridSize = 10;
 5         let canvasWidth = ctx.canvas.width;
 6         let canvasHeight = ctx.canvas.height;
 7 
 8         let xLineTotal = Math.floor(canvasHeight / gridSize);
 9         let yLineTotal = Math.floor(canvasWidth / gridSize);
10 
11         for (let i = 0; i <= xLineTotal; i++) {
12             ctx.beginPath();
13             ctx.moveTo(0, i * gridSize - 0.5);
14             ctx.lineTo(canvasWidth, i * gridSize - 0.5);
15             ctx.strokeStyle = ‘#eee‘;
16             ctx.stroke();
17         }
18 
19         for (let i = 0; i <= yLineTotal; i++) {
20             ctx.beginPath();
21             ctx.moveTo(i * gridSize - 0.5, 0);
22             ctx.lineTo(i * gridSize - 0.5, canvasHeight);
23             ctx.strokeStyle = ‘#eee‘;
24             ctx.stroke();
25         }