C'è un modo per estendere dinamicamente la tela HTML5 senza cancellare ciò che è disegnato su di esso?

StackOverflow https://stackoverflow.com/questions/2405772

  •  18-09-2019
  •  | 
  •  

Domanda

questo

quando l'uscita raggiunge la parte inferiore della pagina, mi piacerebbe la tela di estendere automaticamente in modo che possa andare avanti. Ho provato a impostare la proprietà canvas.height, ma si cancella la finestra. Esiste un modo per fare questo?

È stato utile?

Soluzione

Quello che faccio io:
creare canvas fittizio con stessa taglia come la tela. 

dummyCanvas.getContext('2d').drawImage(yourCanvas, 0, 0);
newCanvas = recreate(yourCanvas);
newCanvas.getContext('2d').drawImage(dummyCanvas);

Non molto bella, soprattutto nella vostra situazione in cui richiederebbe ricreare la tela 50+ volte al secondo ... interessato a vedere altre risposte ... Funziona per me perché ho appena ridimensionare la tela quando il clientWidth / clientHeight cambiamenti [window.onresize]

Altri suggerimenti

So che questo è una sorta di vecchio ora, tuttavia:

Non è necessario ricreare la tela come explaines ItzWarty. Si può fare questo: 

<html>...
  <canvas id="canvas"></canvas>
  <canvas id="buffer" style="display:none;"></canvas>
  ...
</html>

Quindi questo sarà il tuo javascript: 

var canvas = document.getElementById('canvas');
var buffer = document.getElementById('buffer');
window.onresize = function(event) {
    var w = $(window).width(); //Using jQuery for easy multi browser support.
    var h = $(window).height();
    buffer.width = w;
    buffer.height = h;
    buffer.getContext('2d').drawImage(canvas, 0, 0);
    canvas.width = w;
    canvas.height = h;
    canvas.getContext('2d').drawImage(buffer, 0, 0);
}

Qui si cambia solo la dimensione delle tele, e si copia sull'immagine. Non sono sicuro, ma credo che le prestazioni sono un po 'meglio, ed è, a mio parere più semplice e facile da capire.

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top