jquery - HTML5 Canvas 100% 视口(viewport)宽度高度？

Question

我正在尝试创建一个占据视口(viewport) 100% 宽度和高度的 Canvas 元素。

你可以在我的例子中看到here这种情况正在发生，但是它在 Chrome 和 FireFox 中都添加了滚动条。我怎样才能防止额外的滚动条，并且只提供窗口的宽度和高度正好是 Canvas 的大小？

Answer 1

为了使 Canvas 始终全屏显示宽度和高度，这意味着即使在调整浏览器大小时，您也需要在将 Canvas 大小调整为 window.innerHeight 和 window.innerWidth。

示例:http://jsfiddle.net/jaredwilli/qFuDr/

HTML

<canvas id="canvas"></canvas>

JavaScript

(function() {
  const canvas = document.getElementById('canvas');
  const context = canvas.getContext('2d');

  // resize the canvas to fill browser window dynamically
  window.addEventListener('resize', resizeCanvas, false);
        
  function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
                
    /**
     * Your drawings need to be inside this function otherwise they will be reset when 
     * you resize the browser window and the canvas goes will be cleared.
     */
    drawStuff(); 
  }
  
  resizeCanvas();
        
  function drawStuff() {
    // do your drawing stuff here
  }
})();

CSS

* { margin:0; padding:0; } /* to remove the top and left whitespace */

html, body { width:100%; height:100%; } /* just to be sure these are full screen*/

canvas { display:block; } /* To remove the scrollbars */

这就是您如何正确地使 Canvas 成为浏览器的全宽和全高。您只需将所有绘制到 Canvas 的代码放在 drawStuff() 函数中。