使画布填满整个页面答案

【问题标题】：Make canvas fill the whole page使画布填满整个页面
【发布时间】：2011-04-12 01:14:38
【问题描述】：

如何使画布的页面宽度和高度为 100%？

【问题讨论】：

Resize HTML5 canvas to fit window 的可能重复项

【解决方案1】：

我在这里工作：Are Google's Bouncing Balls HTML5? 使用以下 CSS：

* { margin: 0; padding: 0;}

body, html { height:100%; }

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

其中 #c 是画布元素的 id。

【讨论】：

不，这不起作用。它只是拉伸图像以填充页面，但不会改变画布的内部宽度和高度。结果只是一团糟。

【解决方案2】：

你可以在没有 jquery 的情况下使用这些代码

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

【讨论】：

【解决方案3】：

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

也许就这么简单？

【讨论】：

【解决方案4】：

这与<canvas>标签有关。

创建全屏画布时，<canvas> 不设置为 display:block 时会产生滚动条。

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

【讨论】：

最佳答案！唯一对我有用的东西。我只需要添加这一条规则。

【解决方案5】：

您可以通过编程方式设置画布宽度 + 高度：

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

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

【讨论】：

【解决方案6】：

根据我的观察，这运行有效，并给出了蓝色阴影

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>

【讨论】：

【解决方案7】：

这对你有用吗？

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

来自Force canvas element in html to take up the entire window?

【讨论】：

它将宽度设置为 100%，但不会使其高度为 100%。不仅如此，物体也被缩放，看起来像一个小的光栅图像被放大了，所以看起来很奇怪。我该怎么办？