Chrome全屏畫布？

Question

我試圖在Google Chrome上製作全屏畫布。

<style> 
#canvas:-webkit-full-screen { 
    height:100%; 
    width: 100%; 
}  
</style> 
<button onclick="fullScreen()">Full Screen</button> 
<canvas id="canvas"></canvas> 
<script> 
    function fullScreen() { 
     var c = document.getElementById("canvas"); 
     c.webkitRequestFullScreen(); 
    } 
</script> 

此代碼使畫布全屏，但只有高度是全屏。

Answer 1

嘗試使用CSS規則fixed爲position與canvas元素：

position:fixed; 
left:0; 
top:0; 
width:100%; 
height:100%; 

您可能需要設置html和body與寬度/高度：100％爲好。

如果你想避免縮放，因爲這會給你，你需要直接設置畫布元素的寬度和高度（使用window.innerHeight和.innerWidth）。