[英]Full screen canvas for Chrome?
I'm trying to make a full screen canvas on Google Chrome.我正在尝试在 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>
This code makes the canvas full screen, but only the height is full screen.这段代码使画布全屏,但只有高度是全屏的。
Try using the CSS rule fixed
for position
with the canvas element:尝试对 canvas 元素使用
fixed
position
的 CSS 规则:
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
You might need to set html
and body
with width/height: 100% as well.您可能还需要将
html
和body
设置为 width/height: 100%。
If you want to avoid zoom as this will give you, you would need to set the width and height of the canvas element directly (use window.innerHeight
and .innerWidth
).如果你想避免缩放,因为这会给你,你需要直接设置画布元素的宽度和高度(使用
window.innerHeight
和.innerWidth
)。
I do full screen canvas this way:我这样做全屏画布:
More details can be found 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'); }
<canvas id="mycanvas"></canvas>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.