web-dev-qa-db-fra.com

Faire en sorte que la toile remplisse toute la page

Comment faire pour que la toile soit 100% en largeur et en hauteur de la page?

javascripthtml5canvas
20
Sergei Basharov

Eh bien, je le fais fonctionner ici: Les balles rebondissantes de Google sont-elles HTML5? en utilisant les CSS suivants:

* { margin: 0; padding: 0;}

body, html { height:100%; }

#c {
    position:absolute;
    width:100%;
    height:100%;
}

Où #c est l'id de l'élément canvas.

34
Ian Devlin

vous pouvez utiliser ces codes sans jquery

var dimension = [document.documentElement.clientWidth, document.documentElement.clientHeight];
var c = document.getElementById("canvas");
c.width = dimension[0];
c.height = dimension[1];
9
Didats Triadi

Cela a quelque chose à voir avec la balise <canvas>.

lorsqu’il crée un canevas plein écran, <canvas> entraînera une barre de défilement s’il n’est pas configuré pour afficher: bloquer.

detail: http://browser.colla.me/show/canvas_cannot_have_exact_size_to_fullscreen

5
sunderls

Vous pouvez définir par programme la largeur et la hauteur de la toile:

// Using jQuery to get window width + height.
canvasObject.width = $(window).width();
canvasObject.height = $(window).height();

J'ai testé cela et tant que vous redessinez ce qui est sur le canevas après avoir redimensionné, cela ne changera pas la mise à l'échelle.

1
Castrohenge
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

peut-être aussi facile?

1
Pixsa

Est-ce que ça marche pour toi?

<html>
  <body style="height: 100%; margin: 0;">
    <canvas style="width: 100%; height: 100%;"></canvas>
  </body>
</html>

from Forcer l'élément canvas en HTML à occuper toute la fenêtre?

0
Kintaro

sur mes observations cela fonctionne efficacement, et donne une nuance bleue

var c = document.getElementById('can');
  var ctx = canvas.getContext('2d');
  ctx.rect(0, 0, canvas.width, canvas.height);
  // add linear gradient
  var g = ctx.createLinearGradient(0, 0, c.width, c.height);
  // light blue color
  g.addColorStop(0, '#8ED6FF');   
  // dark blue color
  g.addColorStop(1, '#004CB3');
  context.fillStyle = g;
  context.fill();

<script>
var c = document.getElementById('can');
      var ctx = canvas.getContext('2d');
      ctx.rect(0, 0, canvas.width, canvas.height);

      // add linear gradient
      var g = ctx.createLinearGradient(0, 0, c.width, c.height);
      // light blue color
      g.addColorStop(0, '#8ED6FF');   
      // dark blue color
      g.addColorStop(1, '#004CB3');
      context.fillStyle = g;
      context.fill();
</scrip
html,body
{
        height:98.0%;
        width:99.5%;
}
canvas
{
        display:block;
        width:100%;
        height:100%;
}
<html>
<body>
<canvas id="can"></canvas>
</body>
  </html>
0
Rama Ganapathy