Redimensionar a tela HTML5 para caber na janela

400

Como posso dimensionar automaticamente o <canvas>elemento HTML5 para caber na página?

Por exemplo, posso obter um <div>escalonamento definindo as propriedades heighte widthpara 100%, mas um <canvas>não escalará, não é?

javascript html html5-canvas

— devyn
fonte

7

por que canvas {width: 100%; height: 100%} não funciona?

— Zloctb

28

@zloctb - Isso aumentará a escala da tela diretamente, o que ampliará sua imagem.

— Derek朕會功夫

8

Consulte os Fundamentos do WebGL para obter uma explicação detalhada sobre o que e o que não fazer nos problemas relacionados.

— precisa

2

Uma tela também será bem dimensionada, basta adicionar o css {width: 100%}, seu conteúdo não será, no entanto, isso é outra questão!

— ejectamenta

372

Acredito ter encontrado uma solução elegante para isso:

Javascript

/* important! for alignment, you should make things
 * relative to the canvas' current width/height.
 */
function draw() {
  var ctx = (a canvas context);
  ctx.canvas.width  = window.innerWidth;
  ctx.canvas.height = window.innerHeight;
  //...drawing code...
}

CSS

html, body {
  width:  100%;
  height: 100%;
  margin: 0;
}

Até agora, não tive nenhum grande impacto negativo no desempenho para mim.

— devyn
fonte

7

Você provavelmente tem que desativar a margem combody, html { margin: 0px;}

— Nicklas A.

45

É preferível ouvir o evento de redimensionamento?

— Eric

25

@Elisabeth: Para se livrar das barras de rolagem, adicione "overflow: hidden" ao estilo dos elementos html e body. Veja thefutureoftheweb.com/blog/100-percent-height-interface

— Denis Washington

17

Eu fiz isso e também configurei a tela para exibir: block (parecia padrão para exibir: inline, o que estava criando espaço extra!).

— Elisabeth

15

Isso pode ser um anti-padrão; veja o terceiro item aqui para saber o motivo e o remédio.

— precisa

67

A solução a seguir funcionou melhor para mim. Como sou relativamente novo em codificação, gosto de ter uma confirmação visual de que algo está funcionando da maneira que eu esperava. Encontrei-o no seguinte site: http://htmlcheats.com/html/resize-the-html5-canvas-dyamically/

Aqui está o código:

<!DOCTYPE html>

<head>
    <meta charset="utf-8">
    <title>Resize HTML5 canvas dynamically | www.htmlcheats.com</title>
    <style>
    html, body {
      width: 100%;
      height: 100%;
      margin: 0px;
      border: 0;
      overflow: hidden; /*  Disable scrollbars */
      display: block;  /* No floating content on sides */
    }
    </style>
</head>

<body>
    <canvas id='c' style='position:absolute; left:0px; top:0px;'>
    </canvas>

    <script>
    (function() {
        var
        // Obtain a reference to the canvas element using its id.
        htmlCanvas = document.getElementById('c'),
        // Obtain a graphics context on the canvas element for drawing.
        context = htmlCanvas.getContext('2d');

       // Start listening to resize events and draw canvas.
       initialize();

       function initialize() {
           // Register an event listener to call the resizeCanvas() function 
           // each time the window is resized.
           window.addEventListener('resize', resizeCanvas, false);
           // Draw canvas border for the first time.
           resizeCanvas();
        }

        // Display custom canvas. In this case it's a blue, 5 pixel 
        // border that resizes along with the browser window.
        function redraw() {
           context.strokeStyle = 'blue';
           context.lineWidth = '5';
           context.strokeRect(0, 0, window.innerWidth, window.innerHeight);
        }

        // Runs each time the DOM window resize event fires.
        // Resets the canvas dimensions to match window,
        // then draws the new borders accordingly.
        function resizeCanvas() {
            htmlCanvas.width = window.innerWidth;
            htmlCanvas.height = window.innerHeight;
            redraw();
        }
    })();

    </script>
</body> 
</html>

A borda azul mostra a borda da tela de redimensionamento e está sempre ao longo da borda da janela, visível nos quatro lados, o que NÃO foi o caso de algumas das outras respostas acima. Espero que ajude.

— Craig Morrison
fonte

Esta resposta resolveu meu problema. O overflow: hiddene display: blocké o que estava faltando para eu fazer isso funcionar corretamente.

— Deathicon

11

A ligação é interrompida

— Nic Scozzaro

22

Basicamente, o que você precisa fazer é vincular o evento onresize ao seu corpo, depois de capturar o evento, basta redimensionar a tela usando window.innerWidth e window.innerHeight.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Canvas Resize</title>

    <script type="text/javascript">
        function resize_canvas(){
            canvas = document.getElementById("canvas");
            if (canvas.width  < window.innerWidth)
            {
                canvas.width  = window.innerWidth;
            }

            if (canvas.height < window.innerHeight)
            {
                canvas.height = window.innerHeight;
            }
        }
    </script>
</head>

<body onresize="resize_canvas()">
        <canvas id="canvas">Your browser doesn't support canvas</canvas>
</body>
</html>

— equiman
fonte

11

Você pode apenas usar um ouvinte de evento.

— David Corbin

Isso tem margens e mostra barras de rolagem, além de você ter que redimensionar a tela antes que ela faça alguma coisa.

— ArtOfWarfare

E se a tela for maior que a viewport (ao torná-la mais estreita ou mais estreita)? Esta solução não parece lidar com isso.

— Lars Gyrup Brink Nielsen,

As perguntas originais do @ArtOfWarfare não mencionam nada sobre estilos. Mas você pode estilizá-lo com css e remover margens e ocultar barras de rolagem, se quiser. E você simplesmente pode adicionar `<body onload =" resize_canvas () ">` quando o carregamento da página redimensionar a tela.

— Equiman 6/06/16

A pergunta original do @LayZee diz sobre a escala da tela para caber na página , não em uma viewport. Isso pode ser outra pergunta.

— Equiman 6/06/16

19

Definir a largura e a altura do espaço das coordenadas da tela com base nas dimensões do cliente do navegador exige que você redimensione e redesenha sempre que o navegador for redimensionado.

Uma solução menos complicada é manter as dimensões desenháveis nas variáveis Javascript, mas defina as dimensões da tela com base nas dimensões screen.width, screen.height. Use CSS para ajustar:

#containingDiv { 
  overflow: hidden;
}
#myCanvas {
  position: absolute; 
  top: 0px;
  left: 0px;
}

A janela do navegador geralmente nunca será maior que a própria tela (exceto onde a resolução da tela é incorreta, como poderia ser com monitores duplos não correspondentes), para que o fundo não seja exibido e as proporções de pixel não variem. Os pixels da tela serão diretamente proporcionais à resolução da tela, a menos que você use CSS para dimensionar a tela.

— jerseyboy
fonte

7

Redimensionar a tela com CSS é problemático. Pelo menos no Chrome e no Safari, as posições de evento de mouse / toque não corresponderão 1: 1 às posições de pixel da tela e você terá que transformar os sistemas de coordenadas.

— jerseyboy

14

Uma abordagem CSS pura que foi adicionada à solução do @jerseyboy acima.
Funciona no Firefox (testado na v29), Chrome (testado na v34) e Internet Explorer (testado na v11).

<!DOCTYPE html>
<html>
    <head>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
        }
        canvas {
            background-color: #ccc;
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <canvas id="canvas" width="500" height="500"></canvas>
    <script>
        var canvas = document.getElementById('canvas');
        if (canvas.getContext) {
            var ctx = canvas.getContext('2d');
            ctx.fillRect(25,25,100,100);
            ctx.clearRect(45,45,60,60);
            ctx.strokeRect(50,50,50,50);
        }
    </script>
</body>
</html>

Link para o exemplo: http://temporaer.net/open/so/140502_canvas-fit-to-window.html

Mas tome cuidado, como @jerseyboy afirma em seu comentário:

Redimensionar a tela com CSS é problemático. Pelo menos no Chrome e no Safari, as posições de evento de mouse / toque não corresponderão 1: 1 às posições de pixel da tela e você terá que transformar os sistemas de coordenadas.

— Volker E.
fonte

5

A maneira CSS estica a tela, assim as imagens renderizadas são esticadas. Isso não é bom se comparado ao redimensionamento da tela. Com pouco ajuste, a resposta de Craig funciona melhor.

— Nayan

Eu gosto dessa solução, pois isso torna a tela 100% baseada na largura dos pais.

— Maihan Nijat 21/03/19

9

function resize() {

    var canvas = document.getElementById('game');
    var canvasRatio = canvas.height / canvas.width;
    var windowRatio = window.innerHeight / window.innerWidth;
    var width;
    var height;

    if (windowRatio < canvasRatio) {
        height = window.innerHeight;
        width = height / canvasRatio;
    } else {
        width = window.innerWidth;
        height = width * canvasRatio;
    }

    canvas.style.width = width + 'px';
    canvas.style.height = height + 'px';
};

window.addEventListener('resize', resize, false);

— Petr
fonte

Bom, quando a relação é importante

— sarkiroka

8

A menos que você queira que a tela aprimore automaticamente os dados da imagem (é sobre isso que a resposta de James Black fala, mas não ficará bonita), você deve redimensioná-la e redesenhar a imagem. Centralizando uma tela

— Nickolay
fonte

4

Se o seu div preencheu completamente a página da Web, você pode preenchê-lo e criar uma tela que preencha o div.

Você pode achar isso interessante, pois pode precisar usar um css para usar a porcentagem, mas isso depende de qual navegador você está usando e de quanto está de acordo com a especificação: http://www.whatwg.org/ especificações / aplicativos da web / trabalho atual / várias páginas / the-canvas-element.html # the-canvas-element

As dimensões intrínsecas do elemento canvas são iguais ao tamanho do espaço de coordenadas, com os números interpretados em pixels CSS. No entanto, o elemento pode ser dimensionado arbitrariamente por uma folha de estilos. Durante a renderização, a imagem é dimensionada para caber nesse tamanho de layout.

Pode ser necessário obter a offsetWidth e a altura da div ou obter a altura / largura da janela e definir isso como o valor do pixel.

— James Black
fonte

3

CSS

body { margin: 0; } 
canvas { display: block; }

Javascript

window.addEventListener("load", function()
{
    var canvas = document.createElement('canvas'); document.body.appendChild(canvas);
    var context = canvas.getContext('2d');

    function draw()
    {
        context.clearRect(0, 0, canvas.width, canvas.height);
        context.beginPath();
        context.moveTo(0, 0); context.lineTo(canvas.width, canvas.height); 
        context.moveTo(canvas.width, 0); context.lineTo(0, canvas.height); 
        context.stroke();
    }
    function resize()
    {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        draw();
    }
    window.addEventListener("resize", resize);
    resize();
});

— Martin Wantke
fonte

3

Se você estiver interessado em preservar as proporções e fazê-lo em CSS puro (considerando a proporção), pode fazer algo como abaixo. A chave é a padding-bottomdo ::contentelemento que dimensiona o containerelemento. Isso é dimensionado em relação à largura do pai, que é 100%por padrão. A proporção especificada aqui deve corresponder à proporção dos tamanhos no canvaselemento.

// Javascript

var canvas = document.querySelector('canvas'),
    context = canvas.getContext('2d');

context.fillStyle = '#ff0000';
context.fillRect(500, 200, 200, 200);

context.fillStyle = '#000000';
context.font = '30px serif';
context.fillText('This is some text that should not be distorted, just scaled', 10, 40);

/*CSS*/

.container {
  position: relative; 
  background-color: green;
}

.container::after {
  content: ' ';
  display: block;
  padding: 0 0 50%;
}

.wrapper {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

canvas {
  width: 100%;
  height: 100%;
}

<!-- HTML -->

<div class=container>
  <div class=wrapper>
    <canvas width=1200 height=600></canvas>  
  </div>
</div>

Expandir snippet

— mrmcgreg
fonte

2

Usando o jQuery, você pode acompanhar o redimensionamento da janela e alterar a largura da sua tela usando o jQuery também.

Algo parecido

$( window ).resize(function() {
 		$("#myCanvas").width($( window ).width())
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="myCanvas" width="200" height="100" style="border:1px solid #000000;">

Expandir snippet

— Rafael Andrade
fonte

1

(function() {

    // get viewport size
    getViewportSize = function() {
        return {
            height: window.innerHeight,
            width:  window.innerWidth
        };
    };

    // update canvas size
    updateSizes = function() {
        var viewportSize = getViewportSize();
        $('#myCanvas').width(viewportSize.width).height(viewportSize.height);
        $('#myCanvas').attr('width', viewportSize.width).attr('height', viewportSize.height);
    };

    // run on load
    updateSizes();

    // handle window resizing
    $(window).on('resize', function() {
        updateSizes();
    });

}());

— lokers
fonte

0

Eu acho que é isso que devemos fazer exatamente: http://www.html5rocks.com/en/tutorials/casestudies/gopherwoord-studios-resizing-html5-games/

function resizeGame() {
    var gameArea = document.getElementById('gameArea');
    var widthToHeight = 4 / 3;
    var newWidth = window.innerWidth;
    var newHeight = window.innerHeight;
    var newWidthToHeight = newWidth / newHeight;

    if (newWidthToHeight > widthToHeight) {
        newWidth = newHeight * widthToHeight;
        gameArea.style.height = newHeight + 'px';
        gameArea.style.width = newWidth + 'px';
    } else {
        newHeight = newWidth / widthToHeight;
        gameArea.style.width = newWidth + 'px';
        gameArea.style.height = newHeight + 'px';
    }

    gameArea.style.marginTop = (-newHeight / 2) + 'px';
    gameArea.style.marginLeft = (-newWidth / 2) + 'px';

    var gameCanvas = document.getElementById('gameCanvas');
    gameCanvas.width = newWidth;
    gameCanvas.height = newHeight;
}

window.addEventListener('resize', resizeGame, false);
window.addEventListener('orientationchange', resizeGame, false);

— Arvind Bhardwaj
fonte

-2

Estou usando o sketch.js, então, depois de executar o comando init da tela, altero a largura e a altura com o jquery. Baseia as dimensões no elemento pai.

$ ('# DrawCanvas'). Sketch (). Attr ('height', $ ('# DrawCanvas'). Parent (). Height ()). Attr ('width', $ ('# DrawCanvas'). Parent ().largura());

— moeiscool
fonte