Lona HTML5 Altura da largura de 100% do Viewport?

Eu estou tentando criar um elemento de canvas que ocupa 100% da largura e altura da viewport.

Você pode ver no meu exemplo aqui que está ocorrendo, no entanto, está adicionando barras de rolagem no Chrome e no FireFox. Como posso evitar as barras de rolagem extras e apenas fornecer exatamente a largura e altura da janela para ser o tamanho da canvas?

Para tornar a largura e a altura da canvas inteira da canvas sempre, ou seja, mesmo quando o navegador é redimensionado, você precisa executar o loop de desenho dentro de uma function que redimensione a canvas para window.innerHeight e window.innerWidth.

Exemplo: http://jsfiddle.net/jaredwilli/qFuDr/

HTML

 

JavaScript

 (function() { var canvas = document.getElementById('canvas'), context = canvas.getContext('2d'); // resize the canvas to fill browser window dynamically window.addEventListener('resize', resizeCanvas, false); function resizeCanvas() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; /** * Your drawings need to be inside this function otherwise they will be reset when * you resize the browser window and the canvas goes will be cleared. */ drawStuff(); } resizeCanvas(); function drawStuff() { // do your drawing stuff here } })(); 

CSS

 * { margin:0; padding:0; } /* to remove the top and left whitespace */ html, body { width:100%; height:100%; } /* just to be sure these are full screen*/ canvas { display:block; } /* To remove the scrollbars */ 

É assim que você faz corretamente a canvas com largura e altura do navegador. Você só precisa colocar todo o código para desenhar na canvas na function drawStuff ().

Você pode tentar unidades de viewport (CSS3):

 canvas { height: 100vh; width: 100vw; display: block; } 

Vou responder à pergunta mais geral de como ter uma canvas adaptada dinamicamente em tamanho no redimensionamento da janela. A resposta aceita manipula adequadamente o caso em que largura e altura devem ser 100%, que é o que foi solicitado, mas que também alterará a proporção da canvas. Muitos usuários desejarão que a canvas seja redimensionada no redimensionamento da janela, mas mantendo inalterada a proporção. Não é a pergunta exata, mas “encheckbox”, apenas colocando a questão em um contexto um pouco mais geral.

A janela terá algumas proporções (largura / altura) e o object da canvas também. Como você deseja que essas duas relações de aspecto se relacionem entre si é algo que você terá que esclarecer, não há uma resposta “tamanho único” para essa pergunta – eu vou passar por alguns casos comuns do que você pode quer.

O mais importante é que você tem que ter clareza: o object de canvas html possui um atributo width e um atributo height; e então, o css do mesmo object também possui um atributo width e height. Essas duas larguras e alturas são diferentes, ambos são úteis para coisas diferentes.

Alterar os atributos de largura e altura é um método com o qual você sempre pode alterar o tamanho da sua canvas, mas você terá que repintar tudo, o que levará tempo e nem sempre é necessário, porque alguma quantidade de mudança de tamanho você pode realizar através dos atributos css, caso em que você não redesenhará a canvas.

Eu vejo 4 casos do que você pode querer acontecer no redimensionamento de janela (tudo começando com uma canvas inteira)

1: você quer que a largura permaneça 100% e deseja que a proporção fique como estava. Nesse caso, você não precisa redesenhar a canvas; você nem precisa de um manipulador de redimensionamento de janela. Tudo o que você precisa é

 $(ctx.canvas).css("width", "100%"); 

onde ctx é o contexto da sua canvas. violino: resizeByWidth

2: você quer que largura e altura permaneçam 100%, e você quer que a mudança resultante na proporção tenha o efeito de uma imagem esticada. Agora, você ainda não precisa redesenhar a canvas, mas precisa de um manipulador de redimensionamento de janela. No manipulador, você faz

 $(ctx.canvas).css("height", window.innerHeight); 

violino: messWithAspectratio

3: você quer que largura e altura permaneçam 100%, mas a resposta para a mudança na proporção é algo diferente do alongamento da imagem. Então você precisa redesenhar e fazer da maneira descrita na resposta aceita.

rabeca: redesenhar

4: você quer que a largura e a altura sejam 100% no carregamento da página, mas permaneça constante a partir de então (nenhuma reação ao redimensionamento da janela.

violino: fixo

Todos os violinos têm código idêntico, exceto para a linha 63 onde o modo está definido. Você também pode copiar o código do violino para rodar em sua máquina local, e nesse caso você pode selecionar o modo através de um argumento de querystring, como? Mode = redraw

Eu estava procurando encontrar a resposta para essa pergunta também, mas a resposta aceita estava quebrando para mim. Aparentemente, o uso do window.innerWidth não é portátil. Ele funciona em alguns navegadores, mas notei que o Firefox não gostou.

Gregg Tavares postou aqui um ótimo recurso que aborda esse problema diretamente: http://webglfundamentals.org/webgl/lessons/webgl-anti-patterns.html (Veja anti-padrão nºs 3 e 4).

Usando canvas.clientWidth em vez de window.innerWidth parece funcionar bem.

Aqui está o loop de renderização sugerido por Gregg:

 function resize() { var width = gl.canvas.clientWidth; var height = gl.canvas.clientHeight; if (gl.canvas.width != width || gl.canvas.height != height) { gl.canvas.width = width; gl.canvas.height = height; return true; } return false; } var needToRender = true; // draw at least once function checkRender() { if (resize() || needToRender) { needToRender = false; drawStuff(); } requestAnimationFrame(checkRender); } checkRender(); 

http://jsfiddle.net/mqFdk/10/

    aj      

com CSS

 body { margin: 0; padding: 0 } #c { position: absolute; width: 100%; height: 100%; overflow: hidden } 

(Expandindo a resposta de 動靜 能量)

Estilize a canvas para preencher o corpo. Ao renderizar para a canvas, leve em consideração seu tamanho.

http://jsfiddle.net/mqFdk/356/

    aj      

CSS:

 body { margin: 0; padding: 0 } #c { position: absolute; width: 100%; height: 100%; overflow: hidden } 

Javascript:

 function redraw() { var cc = c.getContext("2d"); c.width = c.clientWidth; c.height = c.clientHeight; cc.scale(c.width, c.height); // Draw a circle filling the canvas. cc.beginPath(); cc.arc(0.5, 0.5, .5, 0, 2*Math.PI); cc.fill(); } // update on any window size change. window.addEventListener("resize", redraw); // first draw redraw();