使HTML Canvas适合屏幕

我想使HTML Canvas元素的宽度=浏览器窗口宽度，height =浏览器窗口高度。以下是我使用的代码。使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函数中。

来源

2017-09-27 holycatcrusher

'position：absolute;顶部：0;左：0;宽度：100％;身高：100％;' – Martijn

[试试这个答案，或许可以解决你的问题]（https://stackoverflow.com/a/3078427/6002328） –

@NagyIstván这是一个完美的解决方案。 – holycatcrusher

试试这个为你的CSS：

body { 
    margin: 0; 
} 

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

来源

2017-09-27 08:37:27

试试这个：

html, body { 
    height: 100%; 
} 

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

的100％必须从html元素筛选下来，否则它不会填满屏幕的高度。

来源

2017-09-27 08:42:04

使HTML Canvas适合屏幕

回答

相关问题