强制html中的canvas元素占据整个窗口？答案

【问题标题】：Force canvas element in html to take up the entire window?强制html中的canvas元素占据整个窗口？
【发布时间】：2009-02-05 21:15:21
【问题描述】：

代替

<pre>
    <canvas id="theCanvas" width="500" height="500"></canvas>
</pre>

我在哪里指定画布的大小，有没有办法让画布占据整个浏览器窗口？

【问题讨论】：

Resize HTML5 canvas to fit window的可能重复

标签： html canvas

【解决方案1】：

当您创建跨越整个屏幕的画布元素时，您可能想要监视窗口大小调整事件。您可以继续使用基于百分比的样式，但您必须记住在调整窗口大小时重新绘制画布；当画布元素的尺寸发生变化（宽度或高度）时，画布本身会被清除并有效重置（原点策略除外）。

我建议你使用这样的东西：

window.addEventListener(
  'resize', 
  function() { 
    canvas.width = window.innerWidth; 
    canvas.height = window.innerHeight; 
    MyRepaintCallback(); 
  }, 
  false);

您的重绘功能有几个考虑因素超出了这个问题的范围。至少，请放心，知道双缓冲可能会防止您的画布在重新绘制调用之间闪烁。

【讨论】：

【解决方案2】：

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

【讨论】：

这是不合适的，因为正确缩放需要画布元素的宽度和高度属性。正确的解决方案是检测窗口的宽度和高度，并进行相应的调整以避免锯齿效应。

【解决方案3】：

在 CSS 中，将 html、body（如果 asp.net 则为 form）标签的宽度和高度设置为 100%。

但不适用于旧版 IE。

【讨论】：