Сделать холст заполнением всей страницы

18

Как я могу сделать холст 100% шириной и высотой страницы?

    
задан Sergei Basharov 14.09.2010 в 10:16
источник
  • возможный дубликат холста Resize HTML5 для окна –  Jukka Suomela 20.06.2014 в 16:28

7 ответов

31

Ну, у меня он работает здесь: Являются ли Google Bouncing Balls HTML5? , используя следующий CSS:

* { margin: 0; padding: 0;}

body, html { height:100%; }

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

Где #c - идентификатор элемента canvas.

    
ответ дан Ian Devlin 14.09.2010 в 11:25
источник
  • Почему это работает? –  0xcaff 08.06.2016 в 02:14
6

вы можете использовать эти коды без jquery

var dimension = [document.documentElement.clientWidth, document.documentElement.clientHeight];
var c = document.getElementById("canvas");
c.width = dimension[0];
c.height = dimension[1];
    
ответ дан Didats Triadi 14.09.2010 в 16:01
источник
5

Это как-то связано с тегом <canvas> .

при создании полноэкранного холста <canvas> вызовет полосу прокрутки, если она не установлена: block.

detail: Ссылка

    
ответ дан sunderls 03.07.2015 в 12:04
источник
1

Вы можете программно установить ширину холста + height:

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

Я тестировал это, и он до тех пор, пока вы перерисовываете то, что находится на холсте, после того как вы изменили его размер, не изменит масштаб.

    
ответ дан Castrohenge 14.09.2010 в 10:49
источник
0
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

может быть, это легко?

    
ответ дан ვანი ჩკაა 20.05.2018 в 00:50
источник
  • Хотя этот код может ответить на вопрос, предоставляя дополнительный контекст относительно того, почему и / или как этот код отвечает на вопрос, улучшает его долгосрочную ценность. –  Sergio 20.05.2018 в 04:47
0

Это работает для вас?

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

из Элемент canvas canvas в html для занять все окно?

    
ответ дан Kintaro 14.09.2010 в 10:24
источник
  • Он устанавливает ширину до 100%, но не делает ее высотой 100%. Более того, объекты тоже масштабируются и выглядят как небольшое растровое изображение, которое было увеличено, поэтому оно выглядит странно. Что я могу сделать по этому поводу? –  Sergei Basharov 14.09.2010 в 10:28
0

по моим наблюдениям это работает эффективно и дает синий оттенок

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>
    
ответ дан Rama Ganapathy 18.09.2015 в 14:06
источник