Existe uma maneira de estender dinamicamente a tela HTML5 sem limpar o que é desenhado nela?

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

  •  18-09-2019
  •  | 
  •  

Pergunta

Vejo isto

Quando a saída atinge a parte inferior da página, eu gostaria que a tela estenda automaticamente para que ela possa continuar. Tentei definir a propriedade Canvas.Height, mas ela limpa a janela. Há alguma maneira de fazer isso?

Foi útil?

Solução

O que eu faço:
Crie tela fictícia com o mesmo tamanho que sua tela. 

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

Não é muito bonito, especialmente na sua situação em que isso exigiria que você recriasse a tela mais de 50 vezes por segundo ... interessada em ver outras respostas ... funciona para mim porque eu apenas redimenso a tela quando a largura do cliente/alterações do cliente [Window .OnResize

Outras dicas

Eu sei que isso é meio antigo agora, no entanto:

Você não precisa recriar a tela como Itzwarty explica. Você consegue fazer isso:

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

Então este seria o seu 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);
}

Aqui você muda apenas o tamanho das telas e copia sobre a imagem. Não tenho certeza, mas acredito que o desempenho é um pouco melhor e, na minha opinião, é mais simples e fácil de entender.

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top