css - Chrome 的全屏 Canvas ？

Question

我正在尝试在 Google Chrome 上制作全屏 Canvas 。

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

此代码使 Canvas 全屏，但只有高度全屏。

Answer 1

尝试将 CSS 规则 fixed 用于 position 与 canvas 元素:

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

您可能还需要将 html 和 body 的宽度/高度设置为 100%。

如果你想避免缩放，因为这会给你，你需要直接设置 Canvas 元素的宽度和高度(使用 window.innerHeight 和 .innerWidth).