1

代替

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

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

4

3 回答 3

4

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

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

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

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

于 2009-10-03T20:30:49.283 回答
3 
<html>
  <body style="height: 100%; margin: 0;">
    <canvas style="width: 100%; height: 100%;"></canvas>
  </body>
</html>
于 2009-02-05T21:19:26.717 回答
0

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

但是，在较旧的 IE 中不起作用。

于 2009-02-05T21:19:26.860 回答