Chrome的全屏画布？答案

【问题标题】：Full screen canvas for Chrome?Chrome的全屏画布？
【发布时间】：2020-08-06 00:41:01
【问题描述】：

我正在尝试在 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>

此代码使画布全屏，但只有高度是全屏的。

【问题讨论】：

标签： css html google-chrome canvas

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

我用这种方式做全屏画布：

更多详情请见here。

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');
}

&lt;canvas id="mycanvas"&gt;&lt;/canvas&gt;

【讨论】：