如何让HTML5画布全屏显示?

时间:2013-04-20 19:59:58

标签: javascript html5 canvas html5-canvas fullscreen

我已经看过很多这方面的教程,看起来很简单。我想要的只是让我的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)被调用。我的浏览器会在我测试的每个演示中打开它,但不会在我自己的代码中打开它。

缺少的变量是什么?我必须用谷歌搜索每一个提到这个的链接,但仍然没有。感谢。

1 个答案:

答案 0 :(得分:9)

好的,我发现了问题。这不起作用:

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

这项工作:

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

是的...... 3小时后。