HTML5 Canvas 100% Largeur Hauteur de Viewport?

Question

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

Vous pouvez voir dans mon exemple qui se produit, mais il ajoute des barres de défilement dans les deux Chrome et FireFox. Comment puis-je empêcher les barres de défilement supplémentaires et juste fournir exactement la largeur et la hauteur de la fenêtre à la taille de la toile?

Answer 1

Afin de rendre la toile pleine largeur de l'écran et la hauteur toujours, ce qui signifie, même lorsque le navigateur est redimensionnée, vous devez exécuter votre boucle de tirage dans une fonction qui redimensionne la toile à la window.innerHeight et window.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 */

Voilà comment vous faites correctement la toile pleine largeur et la hauteur du navigateur. Il vous suffit de mettre tout le code pour le dessin sur la toile dans la fonction DrawStuff ().

Answer 2

Vous pouvez unités viewport (CSS3):

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

Answer 3

Je vais répondre à la question plus générale de la façon d'avoir une toile adapter dynamiquement la taille de la fenêtre sur Redimensionner. La réponse acceptée gère de façon appropriée le cas où la largeur et la hauteur sont tous deux censés être 100%, ce qui est ce qui a été demandé, mais qui va aussi changer le rapport d'aspect de la toile. De nombreux utilisateurs veulent la toile pour redimensionner le redimensionnement de la fenêtre, mais tout en gardant le rapport d'aspect intact. Ce n'est pas la question exacte, mais « dans des crises », juste mettre la question dans un contexte un peu plus général.

La fenêtre aura un certain rapport d'aspect (largeur / hauteur), et il en sera l'objet de canevas. Comment vous voulez que ces deux rapports d'aspect pour se rapporter les uns aux autres est une chose que vous aurez à être clair sur, il n'y a pas de « taille unique » réponse à cette question - je vais passer par quelques cas communs de ce que vous pourriez voulez.

chose la plus importante que vous devez être clair sur: l'objet canevas html a un attribut largeur et un attribut de hauteur; et ensuite, le css du même objet a également une largeur et un attribut de hauteur. Ces deux largeurs et hauteurs sont différentes, les deux sont utiles pour des choses différentes.

Modification de la largeur et les attributs de hauteur est une méthode avec laquelle vous pouvez toujours changer la taille de votre toile, mais vous devrez repeindre tout, qui prendra du temps et n'est pas toujours nécessaire, car une certaine quantité de changement de taille vous pouvez accomplir par les attributs css, dans ce cas, vous ne redessine pas la toile.

Je vois 4 cas de ce que vous voudrez peut-être se produire sur Redimensionner la fenêtre (tous en commençant par une toile en plein écran)

1: vous voulez la largeur de rester 100%, et que vous voulez le rapport d'aspect de rester tel qu'il était. Dans ce cas, vous n'avez pas besoin de redessiner la toile; vous n'avez même pas besoin d'un gestionnaire de redimensionnement de la fenêtre. Tout ce que vous avez besoin est

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

où CTX est votre contexte de toile. violon: resizeByWidth

2: vous voulez la largeur et la hauteur à la fois séjour 100%, et que vous voulez le changement résultant du ratio d'aspect d'avoir l'effet d'une image étirée sur. Maintenant, vous n'avez pas encore besoin de redessiner la toile, mais vous avez besoin d'un gestionnaire de redimensionnement de la fenêtre. Dans le gestionnaire, vous faites

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

violon: messWithAspectratio

3: vous voulez la largeur et la hauteur à la fois séjour 100%, mais la réponse à la modification du rapport d'aspect est quelque chose de différent de l'agrandissant. Ensuite, vous devez redessiner, et de le faire de la façon qui est décrite dans la réponse acceptée.

violon: redessiner

4: vous voulez que la largeur et la hauteur à 100% de la charge de page, mais constante de séjour par la suite (aucune réaction à redimensionner la fenêtre

.

violon: fixe

Tous ont un code identique vièles, à l'exception de la ligne 63 où le mode est réglé. Vous pouvez également copier le code du violon à exécuter sur votre machine locale, dans ce cas, vous pouvez sélectionner le mode via un argument querystring, comme? Mode = redessiner

Answer 4

Je cherchais à trouver la réponse à cette question aussi, mais la réponse acceptée brisais pour moi. Apparemment, à l'aide window.innerWidth est pas portable. Il fonctionne dans certains navigateurs, mais j'ai remarqué Firefox ne m'a pas plu.

Gregg Tavares a affiché une excellente ressource ici que aborde cette question directement: http://webglfundamentals.org/webgl/lessons/webgl-anti-patterns.html (Voir # anti-pattern 's 3 et 4).

Utilisation canvas.clientWidth au lieu de window.innerWidth semble fonctionner très bien.

Voici la boucle suggéré de rendre 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();

Answer 5

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

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

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

</body>
</html>

avec CSS

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

Answer 6

(En élargissant de réponse 動靜 能量)

style de la toile pour remplir le corps. Lors du rendu à la toile prendre sa taille compte.

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