SOURCE

console 命令行工具 X clear

                    
>
console
const zr = zrender.init(document.getElementById("ok"))

const gridGroup = new zrender.Group()
const pointGroup = new zrender.Group()
zr.add(gridGroup)
zr.add(pointGroup)

const screenColumn = 15
const screenRow = 25
const tileSize = 25
const canvasWidth = screenColumn * tileSize
const canvasHeight = screenRow * tileSize
const gridColor = '#AAA'

for (let h = 0; h <= screenColumn; h++) {
    const vLine = new zrender.Line({
        shape: {
            x1: h * tileSize,
            y1: 0,
            x2: h * tileSize,
            y2: canvasHeight
        }
    })
    gridGroup.add(vLine)
}

for (let v = 0; v <= screenRow; v++) {
    const hLine = new zrender.Line({
        shape: {
            x1: 0,
            y1: v * tileSize,
            x2: canvasWidth,
            y2: v * tileSize
        }
    })
    gridGroup.add(hLine)
}

function drawTile(position = [0, 0]) {
    const point = new zrender.Rect({
        shape: {
            x: position[0] * tileSize,
            y: position[1] * tileSize,
            width: tileSize,
            height: tileSize
        }
    })

    pointGroup.add(point)
}

drawTile()
<canvas id="ok" width="375" height="625"></canvas>
canvas#ok {
    background: #eee;
}

本项目引用的自定义外部资源