Y at-il un moyen d'étendre dynamiquement la toile de html5 sans effacer ce qui est tiré sur elle?

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

  •  18-09-2019
  •  | 
  •  

Question

voir cette

lorsque la sortie atteint le bas de la page, je voudrais la toile pour étendre automatiquement afin qu'il puisse continuer. J'ai essayé de définir la propriété canvas.height, mais il efface la fenêtre. Est-il possible de le faire?

Était-ce utile?

La solution

Qu'est-ce que je fais:
créer la toile factice avec la même taille que votre toile. 

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

Pas très jolie, surtout dans votre situation où il faudrait vous recréer la toile 50+ fois par seconde ... Intéressé à voir d'autres réponses ... Il travaille pour moi parce que je redimensionner la toile lorsque le clientWidth / clientHeight changements [window.onresize]

Autres conseils

Je sais que c'est un peu vieux maintenant, cependant:

Vous n'avez pas besoin de recréer la toile comme ItzWarty explaines. Vous pouvez faire ceci: 

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

Alors, ce serait votre 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);
}

Ici, vous modifiez uniquement la taille des toiles, et que vous copiez sur l'image. Je ne suis pas sûr, mais je crois que la performance est un peu mieux, et il est à mon avis plus simple et plus facile à comprendre.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top