画布不会全屏

Question

我的笔记本电脑屏幕分辨率：1366x768

var c=document.getElementById("canvas");
var ctx=c.getContext("2d");
ctx.canvas.width  = window.innerWidth;
ctx.canvas.height = window.innerHeight;

此代码创建 1366x600 画布 (chrome)，因为 firefox 和 IE 创建不同的画布宽度和高度。可以全屏吗？ 全屏测试所有内容

Answer 1

听起来您想使用 HTML5 Fullscreen API。这是一篇关于该主题的好文章。

https://developer.mozilla.org/en-US/docs/Web/Guide/DOM/Using_full_screen_mode

简而言之，您的画布元素要求像这样全屏显示：

var canvas = document.getElementById("canvas");
canvas.requestFullscreen();

上面链接的文章应该详细解释细节和跨平台警告。

---

如果您只想让画布占据浏览器窗口中的所有可用空间，则只需要一些 CSS。在谷歌搜索“全屏画布”之后，这是第三个链接，它显示了使其工作所需的 CSS：

http://jsfiddle.net/jaredwilli/qFuDr/