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;
}