让画布填满整个页面

Question

让画布填满整个页面

javascripthtmlcanvas

36

如何使画布(canvas)的宽度和高度都达到页面的100%？

- Sergei Basharov

2

可能是调整HTML5画布以适应窗口大小的重复问题。 - Jukka Suomela

7个回答

17

您可以不使用jQuery使用这些代码

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

- Didats Triadi

13

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

也许那很容易？

- Pixsa

10

这与 <canvas> 标签有关。

当创建全屏画布时，如果未设置为 display:block，则 <canvas> 将导致滚动条出现。

详情请见： http://browser.colla.me/show/canvas_cannot_have_exact_size_to_fullscreen。

- sunderls

最佳答案！这是我唯一有效的方法。我只需要添加这一个规则。 - agiopnl

canvas { display: block; }似乎与最佳答案很好地结合使用。 - root

1

你可以通过编程设置画布的宽度和高度：

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

我已经测试过了，只要在调整大小后重新绘制画布上的内容，就不会改变缩放比例。

- Castrohenge

1

根据我的观察，这个程序运行有效，并且会产生蓝色的色调。

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

0

这对你有效吗？

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

如何让HTML中的画布元素占据整个窗口？

- Kintaro

6

它将宽度设置为100%，但不会使高度变为100%。此外，对象也被缩放了，看起来像是将小的光栅图像放大了，因此看起来很奇怪。我该怎么办？ - Sergei Basharov

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ian Devlin · Accepted Answer

这里我已经能正常工作了：Google的弹跳球是HTML5吗？，使用以下CSS：

* { margin: 0; padding: 0;}

body, html { height:100%; }

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

#c 是画布元素的id。