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）。