如何让HTML5画布全屏显示？ [英] How can I make the HTML5 canvas go fullscreen?

问题描述

我看过很多教程，看起来很简单。所有我想要的是让我的HTML5画布元素全屏（如总的全屏，占据整个显示器）。

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).

这是我的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文件中）：

Here's my Javascript (in its own .js file):

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

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.

缺少的变量是什么？我必须有Googled字面上每一个链接提到这一点，仍然没有。谢谢。

What's the missing variable? I must have Googled literally every link that mentions this, and still nothing. Thanks.

推荐答案

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

Okay, I found the problem. This does not work:

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

这项工作：

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

是... 3小时后。

这篇关于如何让HTML5画布全屏显示？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！