javascript 如何使 HTML5 画布全屏显示？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16124569/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I make the HTML5 canvas go fullscreen?
提问by Sefu
I have seen dozens of tutorials on this, and it seems straight forward. All I want is to make my HTML5 canvas element go full-screen (as in total full-screen, taking up the whole monitor).
我已经看过很多关于这方面的教程，而且看起来很简单。我想要的只是让我的 HTML5 canvas 元素全屏显示（就像全屏显示一样，占据整个显示器）。
Here's my HTML:
这是我的 HTML：
<p><canvas id="screen" width="800" height="500"
style="background: #FFFFFF; border: 5px solid black;" role="img">
Your browser does not support the canvas element.
</canvas></p>
<p><a href="javascript:goFullScreen();">Go Fullscreen</a></p>
Here's my Javascript (in its own .js file):
这是我的 Javascript（在它自己的 .js 文件中）：
function goFullScreen(){
var canvas = document.getElementById("screen");
if(canvas.requestFullScreen)
canvas.requestFullScreen();
else if(canvas.webkitRequestFullScreen)
canvas.webkitRequestFullScreen();
else if(canvas.mozRequestFullScreen)
canvas.mozRequestFullScreen();
}
I tested the function; it gets called and one of the three ifs (namely, since I'm using Firefox, mozRequestFullScreen) gets called. My browser opens it up on every demo that I've tested, but not in my own code.
我测试了这个功能；它被调用，并且三个 ifs 之一（即，因为我使用的是 Firefox，mozRequestFullScreen）被调用。我的浏览器在我测试过的每个演示中打开它，但不是在我自己的代码中。
What's the missing variable? I must have Googled literally every link that mentions this, and still nothing. Thanks.
缺失的变量是什么？我一定在谷歌上搜索了每一个提到这一点的链接，但仍然没有。谢谢。
回答by Sefu
Okay, I found the problem. This does not work:
好的，我发现了问题。这不起作用：
<p><a href="javascript:goFullScreen();">Go Fullscreen</a></p>
This DOES work:
这确实有效：
<p><button onclick="goFullScreen();">Go Fullscreen</button></p>
Yeah... 3 hours later.
是的... 3 小时后。
