主页 / user-554825

Renvo's questions

Martin Hope
Renvo
Asked: 2024-08-23 17:08:18 +0000 UTC
  • 6

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