Question

好吧，所以我有这个网格，我希望在分辨率的整个空间内全屏显示。

但我不能让它注册超过屏幕的2/3三分之一。

我在自制CanvasElement课程中有一个Grid。当您按下按钮时，网格应通过此方法全屏显示：

void fullScreenRequest(){      
  document.onFullscreenChange.listen(grid.handleFullScreen());
  grid.requestFullscreen();      
}

这会在Grid：

中触发这些方法

void requestFullscreen(){       
   canvas.requestFullscreen();       
}

void handleFullScreen(){              
   window.setImmediate(() {         
       canvas.width = (canvas.parent as Element).client.width;
       canvas.height = (canvas.parent as Element).client.height;         

       canvasWidth = canvas.width;
       canvasHeight = canvas.height;        
   });       
 }

绘制网格内容时，我使用canvasWidth和canvasHeight作为基础。如何让这些值成为屏幕的完整分辨率？

Answer 1

只需获取回调中的窗口大小：

canvas.width = window.innerWidth; // Or window.screen.available.width
canvas.height = window.innerHeight;
canvas.style.position = 'absolute'; // If you need

Answer 2

你可以试试这个

:-webkit-full-screen #CanvasElement {
  width: 100%;
  height: 100%;
}

建议here

Answer 3

我用过这个：

original_width = canvas.width;
original_height = canvas.height;
canvas.onFullscreenChange.listen( (t){
  if( canvas == document.fullscreenElement ){
    canvas.width = window.screen.width;
    canvas.height = window.screen.height;
  }
  else{
    canvas.width = original_width;
    canvas.height = original_height;
  }
} );

document.fullscreenElement 会返回当前全屏的元素，并用于在再次退出全屏时恢复大小。

window.screen.height 返回全屏高度，而 window.screen.available.height 返回屏幕高度，不包括为任务栏保留的空间您的桌面环境。不要使用后者，也不要使用很多解决方案，如 document.body.clientHeight ， canvas.offsetHeight 等，你在网上找到它们，它们不会给出大小你想要的。

使用canvas.requestFullscreen（）进入全屏时如何调整画布大小？

3 个答案: