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

嘗試對 canvas 元素使用fixed position的 CSS 規則：

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

您可能還需要將html和body設置為 width/height: 100%。

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

Answer 2

我這樣做全屏畫布：

可以在此處找到更多詳細信息。

 var canvas = document.getElementById("mycanvas"); var ctx = canvas.getContext("2d"); function refreshCanvas() {//refresh size canvas function document.body.style.width = window.innerWidth+'px'; document.body.style.height = window.innerHeight+'px'; canvas.setAttribute('width', window.innerWidth+'px'); canvas.setAttribute('height', window.innerHeight+'px'); } window.addEventListener('resize', refreshCanvas); //refresh when resize window window.addEventListener('load', refreshCanvas); //refresh when load window

 body { margin: 0px; } #mycanvas { background-image: url('https://gmer.io/resource/community/backgroundCanvas.png'); }

 <canvas id="mycanvas"></canvas>