javascript - 如何让 HTML5 Canvas 全屏显示？

Question

我看过几十个这方面的教程，而且看起来很简单。我只想让我的 HTML5 canvas 元素全屏显示(就像完全全屏一样，占据整个显示器)。

这是我的 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)被调用。我的浏览器会在我测试过的每个演示中打开它，但不会在我自己的代码中打开它。

缺失的变量是什么？我必须用谷歌搜索每个提到这个的链接，但仍然没有。谢谢。

Answer 1

好的，我找到问题了。这不起作用:

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

这确实有效:

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

是的……3 小时后。