主页 / 问题 / 1591673
Accepted
Renvo
Asked:2024-08-23 17:08:18 +0000 UTC2024-08-23 17:08:18 +0000 UTC

如何计算全屏模式下黑条的大小

  • 772

var ctx = document.getElementById('ctx').getContext('2d')
var canvas = document.getElementById('ctx')
var openFullscreen = function() {
  if (canvas.requestFullscreen) {
    canvas.requestFullscreen();
  } else if (canvas.webkitRequestFullscreen) { /* Safari */
    canvas.webkitRequestFullscreen();
  } else if (canvas.msRequestFullscreen) { /* IE11 */
    canvas.msRequestFullscreen();
  }
}
document.onmousedown = function() {
  openFullscreen()
}
setInterval(function() {
  ctx.clearRect(0, 0, 10000, 10000)
  ctx.fillStyle = 'blue'
  ctx.fillRect(0, 0, 10000, 10000)
  ctx.fillStyle = 'black'
  ctx.font = '30px Arial'
  ctx.fillText(canvas.getBoundingClientRect().x, 0, 30)
}, 1000 / 25)
body {
  margin: 0;
}
<canvas id="ctx" width="100px" height="100px" style="display: block;margin:auto;"></canvas>

当切换canvas.requestFullscreen()到全屏模式时，屏幕两侧会出现条纹，需要计算条纹的大小。canvas.getBoundingClientRect().x没有帮助，因为它计算元素本身与窗口边框的距离。screen.availWidth，screen.width并且window.innerWidth切换到全屏模式时不要更改值。在示例中，蓝色方块显示canvas.getBoundingClientRect().x，当您单击该方块时，该值变为零，因为画布占据了整个屏幕，但黑色条绘制在画布顶部，因为它们上无法显示任何内容。告诉我如何找出这些条纹的大小？我需要知道它们的含义才能将光标正确定位在画布上。

javascript

1 个回答

  1. Best Answer

    正如Grundy建议的，您可以通过将游戏分辨率乘以屏幕分辨率，并使用最大高度比来重新计算，得到全屏模式下游戏的宽度，新的宽度与屏幕宽度之间的差异将是两栏 var scallingsiz = (window.innerHeight/gameheight*gamewidth-window.innerWidth)/2

    <html>
<style>
body{
margin:0;
}
</style>
<canvas id="ctx" width="100px" height="100px" style="display: block;margin:auto;"></canvas>
<script>
var ctx = document.getElementById('ctx').getContext('2d')
var canvas = document.getElementById('ctx')
var openFullscreen=function() {
  if (canvas.requestFullscreen) {
    canvas.requestFullscreen();
  } else if (canvas.webkitRequestFullscreen) { /* Safari */
    canvas.webkitRequestFullscreen();
  } else if (canvas.msRequestFullscreen) { /* IE11 */
    canvas.msRequestFullscreen();
  }
}
document.onmousedown=function(){
openFullscreen()
}
var gamewidth=100
var gameheight=100
var scallingsiz = (window.innerHeight/gameheight*gamewidth-window.innerWidth)/2
setInterval(function(){
ctx.clearRect(0,0,10000,10000)
ctx.fillStyle='blue'
ctx.fillRect(0,0,10000,10000)
ctx.fillStyle='black'
ctx.font = '30px Arial'
ctx.fillText(-scallingsiz,0,30)
},1000/25)

</script>
</html>
    • 0

相关问题