HTML5 Canvas non traccia le righe oltre il 2040 in entrambe le direzioni

Question

Modifica: ha eseguito il codice su un computer più potente e la griglia è stata renderizzata correttamente. Possibile limitazione hardware? Computer in cui si è verificato il problema è stato un Chromebook Samsung serie 3. Penso che abbia a che fare con il tentativo di disegnare troppe linee allo stesso tempo. Testerà più tardi.

Sto provando a disegnare una griglia su una tela utilizzando il metodo lineTo(). Le linee si disegnano correttamente all'inizio, ma qualsiasi linea disegnata completamente oltre i 2048 pixel verso il basso o verso destra non viene visualizzata. La linea che va da questo punto al passato appare ancora dall'altra parte, solo le linee che sono solo disegnate oltre il punto non vengono visualizzate.

Ecco la mia JavaScript:

function drawGrid() { 
     //data.tiles is the map stored as an array of arrays 
     //tilesize = 60 

     var bw = data.tiles[0].length * tilesize; 
     var bh = data.tiles.length * tilesize; 

     ctx.beginPath(); 

     for (i = bw; i >= 0; i -= tilesize) { 
      ctx.moveTo(i, 0); 
      ctx.lineTo(i, bh); 
     } 
     for (i = bh; i >= 0; i -= tilesize) { 
      ctx.moveTo(0, i); 
      ctx.lineTo(bw,i); 
     } 

     ctx.strokeStyle = "black"; 
     ctx.stroke(); 
    } 

Ho controllato i data.tiles variabili, e sta leggendo il numero giusto. Davvero non ho idea di cosa ho incasinato qui.

Answer 1

HTML Canvas ha un'area di rendering massima in base all'hardware del tuo browser &.

una volta superato questi limiti, il tuo lavoro è stato più che soddisfacente.

provare pre-rendering o utilizzare più canvas 'posizionato con CSS.

Answer 2

Se è possibile vedere le immagini disegnate oltre il 2048, non c'è motivo per cui una linea non venga disegnata.

Nel codice si calcolano bw e bh in diversi modi. Potresti controllare se questo è un problema. In caso contrario, avremo bisogno di vedere più codice.

// bw uses data.tiles[0] 

var bw = data.tiles[0].length * tilesize; 

// bh uses data.tiles with no subscript 

var bh = data.tiles.length * tilesize;