Canvas 绘制网格Grid

var myCanvas = document.querySelector('canvas');
        var ctx = myCanvas.getContext('2d');

        let gridSize = 10;
        let canvasWidth = ctx.canvas.width;
        let canvasHeight = ctx.canvas.height;

        let xLineTotal = Math.floor(canvasHeight / gridSize);
        let yLineTotal = Math.floor(canvasWidth / gridSize);

        for (let i = 0; i <= xLineTotal; i++) {
            ctx.beginPath();
            ctx.moveTo(0, i * gridSize - 0.5);
            ctx.lineTo(canvasWidth, i * gridSize - 0.5);
            ctx.strokeStyle = '#eee';
            ctx.stroke();
        }

        for (let i = 0; i <= yLineTotal; i++) {
            ctx.beginPath();
            ctx.moveTo(i * gridSize - 0.5, 0);
            ctx.lineTo(i * gridSize - 0.5, canvasHeight);
            ctx.strokeStyle = '#eee';
            ctx.stroke();
        }