[英]Full screen canvas for 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>
这段代码使画布全屏,但只有高度是全屏的。
尝试对 canvas 元素使用fixed
position
的 CSS 规则:
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
您可能还需要将html
和body
设置为 width/height: 100%。
如果你想避免缩放,因为这会给你,你需要直接设置画布元素的宽度和高度(使用window.innerHeight
和.innerWidth
)。
我这样做全屏画布:
可以在此处找到更多详细信息。
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.