Question

我想这样做，以便HTML Canvas元素的宽度=浏览器窗口宽度，height =浏览器窗口高度。以下是我使用的代码。

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函数中。

Answer 1

尝试使用CSS：

body {
  margin: 0;
}

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

Answer 2

试试这个：

html, body {
    height: 100%;
}

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

100％必须从html元素中过滤掉，否则它不会填满屏幕的高度。

使HTML Canvas适合屏幕

2 个答案: