使 HTML Canvas 适合屏幕答案

【问题标题】：Make HTML Canvas fit screen使 HTML Canvas 适合屏幕
【发布时间】：2017-09-27 08:34:51
【问题描述】：

我想让 HTML Canvas 元素的宽度 = 浏览器窗口宽度，高度 = 浏览器窗口高度。下面是我使用的代码。

HTML：

   <body>
       <canvas id="gameCanvas"></canvas>
   <body />

JS：

function Main() {
   this.canvas;
   this.context;
   this.canvasWidth;
   this.canvasheight;

   this.screenWidth;
   this.screenHeight;

   this.boxWidth;
   this.boxHeight;

   //This function is used to gather all required startup data
   this.initalize = function (canvas) {
      this.canvas = canvas;
      this.context = this.canvas[0].getContext('2d');

   }

   //This function is used to size the canvas to the screen size
   this.sizeCanvas = function () {
      this.canvas.css("width", this.screenWidth + "px");
      this.canvas.css("height", this.screenHeight + "px");
      this.canvas[0].width = this.screenWidth;
      this.canvas[0].height = this.screenHeight;


   }

   //This function is used to draw a stickman
   this.drawStickMan = function (x, y) {
      var headRadius = 0;
      if (this.boxWidth < this.boxHeight) {
          headRadius = this.boxWidth;

      } else {
          headRadius = this.boxHeight;

      }

      this.context.beginPath();
      this.context.arc(x + this.boxWidth, y + this.boxHeight, headRadius, 0, 2 * Math.PI);
      this.context.stroke();
      console.log("run" + this.boxHeight);

   }

   //This function is run on page load, and when the screen resizes
   this.resize = function () {
      this.screenWidth = screen.width;
      this.screenHeight = screen.height;
      this.sizeCanvas();

      this.canvasWidth = this.canvas[0].width;
      this.canvasheight = this.canvas[0].height;

      this.boxWidth = this.canvasWidth / 16;
      this.boxHeight = this.canvasheight / 32;
      this.drawStickMan(100, 100);

   }

}

运行上述类的JS：

   //This function is used to run the game
$(document).ready(function () {
   var main = new Main();
   main.initalize($("#gameCanvas"));
   main.resize();

   //run whenever screen size changes
   $(window).resize(function () {
      main.resize();
   });

});

无论我做什么，我似乎都无法让画布适合整个屏幕。我不确定画布不适合的原因。我认为问题出在sizeCanvas 函数中。

【问题讨论】：

position:absolute; top:0; left:0; width: 100%; height: 100%;
try that answer , maybe solving your issue
@Nagy István 这是一个完美的解决方案。
onclick go full screen的可能重复

标签： javascript jquery html canvas

【解决方案1】：

为你的 CSS 试试这个：

body {
  margin: 0;
}

#gameCanvas {
  width: 100vw;
  height: 100vh;
}

【讨论】：

【解决方案2】：

试试这个：

html, body {
    height: 100%;
}

#gameCanvas {
    width: 100%;
    height: 100%;
}

100% 必须从 html 元素向下过滤，否则它不会填满屏幕的高度。

【讨论】：