如何让HTML5画布变为全屏？

我已经看过几十篇关于这方面的教程，看起来很直接。我想要的只是让我的HTML5 canvas元素全屏显示（如全屏全屏，占用整个显示器）。如何让HTML5画布变为全屏？

这里是我的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>

这里是我的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(); 
}

我测试的功能;它被调用，并且三个ifs之一（即，因为我使用Firefox，mozRequestFullScreen）被调用。我的浏览器在我测试过的每个演示中打开它，但没有在我自己的代码中。

什么是缺失变量？我必须从字面上搜索提到这一点的每一个环节，而且一无所获。谢谢。

来源

2013-04-20 Sefu

那么你自己的代码有什么不同？你的画布有不同的'ID'吗？你确定有一个if语句被输入吗？ – Ian 2013-04-20 20:05:53

好的，我发现了这个问题。这不起作用：

<p><a href="javascript:goFullScreen();">Go Fullscreen</a></p>

这是否工作：

<p><button onclick="goFullScreen();">Go Fullscreen</button></p>

是啊...... 3个小时后。

来源

2013-04-20 20:08:13 Sefu

那么你的第一个*应该*工作，但不建议/首选 – Ian 2013-04-20 20:09:20

哇。这很有趣。 'javascript：something（）'根据你如何定义函数的不同而工作：http://jsfiddle.net/WntTv/ – 2013-04-20 20:22:32

如果它被定义为'function something（）{}'，你会得到一个ReferenceError。但是如果它被定义为'something = function（）{}'href处理函数可以看到它。 – 2013-04-20 20:24:55

如何让HTML5画布变为全屏？

回答

相关问题