如何讓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畫布變爲全屏？

回答

相關問題