Sto cercando di creare un elemento canvas che occupa il 100% della larghezza e dell'altezza del viewport.

Puoi vedere nel mio esempio qui che si sta verificando, tuttavia sta aggiungendo barre di scorrimento in Chrome e FireFox. Come posso evitare le barre di scorrimento extra e fornire esattamente la larghezza e l'altezza della finestra in modo che siano le dimensioni della tela?

Per rendere sempre la larghezza e l'altezza dello schermo a schermo intero, il che significa anche quando il browser viene ridimensionato, è necessario eseguire il ciclo di disegno all'interno di una funzione che ridimensiona l'area di disegno su window.innerHeight e window.innerWidth.

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

HTML

<canvas id="canvas"></canvas>

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 */

Ecco come rendere correttamente la larghezza della tela e l'altezza del browser. Devi solo mettere tutto il codice per disegnare sulla tela nella funzione drawStuff ().

Puoi provare le unità viewport (CSS3):

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

Risponderò alla domanda più generale su come fare in modo che una tela si adatti dinamicamente alle dimensioni al ridimensionamento della finestra. La risposta accettata gestisce in modo appropriato il caso in cui sia la larghezza che l'altezza dovrebbero essere al 100%, il che è ciò che è stato richiesto, ma che cambierà anche le proporzioni della tela. Molti utenti vorranno ridimensionare la tela al ridimensionamento della finestra, ma mantenendo invariate le proporzioni. Non è la domanda esatta, ma "si adatta", inserendo la domanda in un contesto leggermente più generale.

La finestra avrà alcune proporzioni (larghezza / altezza), così come l'oggetto tela. Il modo in cui vuoi che questi due aspetti siano correlati l'uno con l'altro è una cosa di cui dovresti essere chiaro, non esiste una risposta "adatta per tutti" a questa domanda - Esaminerò alcuni casi comuni di ciò che potresti volere.

La cosa più importante di cui devi essere chiaro: l'oggetto canvas html ha un attributo di larghezza e un attributo di altezza; e poi, il CSS dello stesso oggetto ha anche un attributo di larghezza e altezza. Queste due larghezze e altezze sono diverse, entrambe sono utili per cose diverse.

La modifica degli attributi di larghezza e altezza è un metodo con cui puoi sempre cambiare la dimensione della tua tela, ma dovrai ridipingere tutto, il che richiederà tempo e non è sempre necessario, perché puoi apportare un po 'di cambiamento di dimensione tramite gli attributi css, nel qual caso non si ridisegna la tela.

Vedo 4 casi di ciò che potresti voler accadere sul ridimensionamento della finestra (tutti a partire da una tela a schermo intero)

1: vuoi che la larghezza rimanga al 100% e vuoi che le proporzioni rimangano com'erano. In tal caso, non è necessario ridisegnare la tela; non hai nemmeno bisogno di un gestore di ridimensionamento della finestra. Tutto ciò che serve è

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

dove ctx è il contesto della tua tela. violino: resizeByWidth

2: si desidera che la larghezza e l'altezza rimangano entrambe al 100% e si desidera che la modifica risultante nelle proporzioni abbia l'effetto di un'immagine allungata. Ora, non è ancora necessario ridisegnare la tela, ma è necessario un gestore di ridimensionamento della finestra. Nel gestore, lo fai

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

violino: messWithAspectratio

3: vuoi che la larghezza e l'altezza rimangano entrambe al 100%, ma la risposta al cambiamento nelle proporzioni è qualcosa di diverso dallo stiramento dell'immagine. Quindi è necessario ridisegnare e farlo nel modo indicato nella risposta accettata.

violino: redraw

4: vuoi che la larghezza e l'altezza siano al 100% al caricamento della pagina, ma rimani costante da allora in poi (nessuna reazione al ridimensionamento della finestra.

violino: fisso

Tutti i violini hanno un codice identico, ad eccezione della riga 63 in cui è impostata la modalità. Puoi anche copiare il codice del violino per eseguirlo sul tuo computer locale, nel qual caso puoi selezionare la modalità tramite un argomento querystring, come? Mode = redraw

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

<!DOCTYPE html>
<html>
<head>
    <title>aj</title>
</head>
<body>

    <canvas id="c"></canvas>

</body>
</html>

con CSS

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

Stavo cercando di trovare la risposta anche a questa domanda, ma la risposta accettata si stava spezzando per me. Apparentemente usando window.innerWidth non è portatile. Funziona in alcuni browser, ma ho notato che a Firefox non piaceva.

Gregg Tavares ha pubblicato una grande risorsa qui che affronta direttamente questo problema: http://webglfundamentals.org/webgl/lessons/webgl-anti-patterns.html (Vedi 3 e 4 di anti-pattern #).

L'uso di canvas.clientWidth invece di window.innerWidth sembra funzionare bene.

Ecco il ciclo di rendering suggerito da 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();

(Espandendosi sulla risposta di 動靜 能量)

Disegna la tela per riempire il corpo. Quando si esegue il rendering sulla tela, tenere conto delle sue dimensioni.

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

<!DOCTYPE html>
<html>
<head>
    <title>aj</title>
</head>
<body>

    <canvas id="c"></canvas>

</body>
</html>

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();

Per i cellulari, è meglio usarlo

canvas.width = document.documentElement.clientWidth;
canvas.height = document.documentElement.clientHeight;

perché verrà visualizzato in modo errato dopo aver modificato l'orientamento. La "finestra" verrà aumentata quando si cambia l'orientamento in verticale. Vedere l' esempio completo