HTML5 Canvas 100% de la Largeur de la Hauteur de la Fenêtre d'affichage?

Question

Je suis en train de créer un élément canvas qui prend 100% de la largeur et de la hauteur de la fenêtre d'affichage.

Vous pouvez le voir dans mon exemple ici que se pose, cependant il est l'ajout de barres de défilement dans Chrome et FireFox. Comment puis-je empêcher le supplément de barres de défilement et il suffit de fournir exactement la largeur et la hauteur de la fenêtre à la taille de la toile?

Answer 1

Afin de rendre la toile plein écran, la largeur et la hauteur de toujours, ce qui signifie que même lorsque le navigateur est redimensionnée, vous devez exécuter votre tirage de boucle à l'intérieur d'une fonction qui redimensionne la toile à la fenêtre.innerHeight et de la fenêtre.innerWidth.

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

Qui est de savoir comment bien vous faire de la toile largeur et de la hauteur du navigateur. Vous avez juste à mettre tout le code pour le dessin de la toile dans le drawStuff() fonction.

Answer 2

Vous pouvez essayer de fenêtre d'affichage unités (CSS3):

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

Answer 3

Je vais répondre à la question plus générale de la façon d'avoir une toile d'adapter dynamiquement la taille lors de la fenêtre de redimensionnement. La accepté de répondre de façon appropriée traite le cas où la largeur et la hauteur sont censés être de 100%, ce qui était demandé, mais qui va aussi changer le ratio d'aspect de la toile. De nombreux utilisateurs veulent que la toile de redimensionner la fenêtre de redimensionnement, mais tout en gardant le ratio d'aspect intact. Ce n'est pas la question exacte, mais il "s'adapte", vient de mettre la question un peu plus générale.

La fenêtre aura un certain rapport d'aspect (hauteur / largeur), et ne sera donc l'objet canvas. Comment vous voulez que ces deux proportions se rapportent les uns aux autres est une chose que vous devez être clair sur, il n'existe pas de "one size fits all" la réponse à cette question, je vais passer par certaines des cas fréquents de ce que vous voulez.

La plus importante chose que vous devez être clair au sujet de: le html en toile objet possède un attribut width et un height attribut; et puis, le css de la même objet a également une largeur et une hauteur d'attribut. Ces deux largeurs et les hauteurs sont différentes, les deux sont utiles pour différentes choses.

Modification de la largeur et de la hauteur des attributs est une méthode avec laquelle vous pouvez toujours modifier la taille de votre toile, mais vous aurez à repeindre tout ce qui va prendre du temps et n'est pas toujours nécessaire, parce que, d'une certaine quantité de changement de taille que vous pouvez accomplir via le css attributs, dans ce cas, vous ne pas redessiner la toile.

Je vois 4 cas de ce que vous pourriez vouloir pour arriver sur la fenêtre de redimensionnement (tout en commençant avec un plein écran de la toile)

1: vous souhaitez que la largeur de rester à 100%, et vous voulez le ratio d'aspect de rester comme il était. Dans ce cas, vous n'avez pas besoin de redessiner la toile, vous n'avez même pas besoin de redimensionner une fenêtre de gestionnaire. Tous vous avez besoin est

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

où ctx est votre toile contexte. violon: resizeByWidth

2: vous voulez de la largeur et de la hauteur à la fois de rester 100%, et vous voulez le changement résultant de l'aspect ratio d'avoir l'effet d'une étendu de l'image. Maintenant, vous n'avez toujours pas besoin de redessiner la toile, mais vous avez besoin de redimensionner une fenêtre de gestionnaire. Dans le gestionnaire, vous ne

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

violon: messWithAspectratio

3: vous voulez de la largeur et de la hauteur à la fois de rester 100%, mais la réponse à la variation de ratio d'aspect est quelque chose de différent de l'étirement de l'image. Ensuite, vous avez besoin de rafraîchissement, et de le faire de la manière décrite dans la accepté de répondre.

violon: redessiner

4: vous souhaitez que la largeur et la hauteur de 100% au chargement de la page, mais rester constant par la suite (pas de réaction à la fenêtre de redimensionnement.

violon: fixe

Tous les violons ont un code identique, sauf pour la ligne 63 lorsque le mode est réglé. Vous pouvez également copier le violon de code à exécuter sur votre machine locale, dans ce cas, vous pouvez sélectionner le mode par l'intermédiaire d'une chaîne de requête argument, que ?mode=redessiner

Answer 4

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

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

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

</body>
</html>

avec les CSS

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

Answer 5

(En s'appuyant sur 動靜能量 réponse)

Le Style de la toile pour remplir le corps. Lors du rendu de la toile de prendre en compte la taille.

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