0

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?

1
  • Com CSS não seria uma opção para vc??
    – hugocsl
    Commented 25/08/2018 às 21:58

2 Respostas 2

1

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()
0

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .