Andei a pesquisar mas não encontrei muita informação. O que pretendo fazer é desenhar uma grid como background no canvas. Vi alguns exemplos com svg e outros diretamente no canvas. Supondo que vou permitir fazer zoom e arrastar o cenário do canvas entre outras informações. Qual é a melhor opção?
2 Respostas
Acretito que isso ajude.
const canvas = document.querySelector("canvas")
const c = canvas.getContext("2d")
canvas.width = 400;
canvas.height = 400;
const tileCount = 20;
let gridX = canvas.width / tileCount;
let gridY = canvas.height / tileCount;
function drawGrid() {
c.strokeStyle = "rgba(255, 0, 0)"
for (let i = 0; i < gridX; i++) {
for (let j = 0; j < gridY; j++) {
c.rect(i*tileCount, j*tileCount, tileCount, tileCount)
}
}
c.stroke()
}
drawGrid()
Bom, sei que já respondi este post, porém, queria compartilhar como desenvolver um grid colorido que desenvolvi para meu Snake Game, basta mudar as cores para que fiquem conforme o seu gosto.
const tileCount = 20;
const gridX = canvas.width / tileCount;
const gridY = canvas.height / tileCount;
function drawGrid() {
for (let i = 0; i < gridX; i++) {
for (let j = 0; j <gridY; j++) {
if((j+i) % 2 == 0){
c.fillStyle = "#B2DD72"
c.fillRect(i*tileCount, j*tileCount, tileCount, tileCount)
}else{
c.fillStyle = "#74BF75"
c.fillRect(i*tileCount, j*tileCount, tileCount, tileCount)
}
}
}
}