Question

而不是

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

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

Answer 1

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

Answer 2

当您创建跨越整个屏幕的画布元素时，您可能希望监视窗口大小调整事件。您可以继续使用基于百分比的样式，但是每当调整窗口大小时，您都必须记住重绘画布;当canvas元素的尺寸被更改（宽度或高度）时，画布本身被清除并有效地重置（原始策略是一个例外）。

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

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

除了此问题的范围之外，您的重绘功能有几个注意事项。至少，请放心，因为双重缓冲可能会让您的画布在重新绘制调用之间不会闪烁。

Answer 3

在CSS中，将html，body（以及asp.net格式）标记的宽度和高度设置为100％。

但是在旧的IE浏览器中不起作用。

在html中强制canvas元素占用整个窗口？

3 个答案: