Rendre l'écran HTML Canvas fit

Je voudrais faire en sorte que l'élément HTML Canvas ait une largeur = à la largeur de la fenêtre du navigateur, et height = la hauteur de la fenêtre du navigateur. Voici le code que j'utilise.Rendre l'écran HTML Canvas fit

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 qui exécute la classe ci-dessus:

//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(); 
    }); 

});

Peu importe ce que je ne je ne peux pas sembler obtenir la toile pour s'adapter l'écran entier. Je ne suis pas sûr de la raison pour laquelle la toile ne va pas. Je crois que le problème est dans la fonction sizeCanvas.

Source

2017-09-27 holycatcrusher

'position: absolue; en haut: 0; gauche: 0; largeur: 100%; hauteur: 100%; ' – Martijn

[essayez cette réponse, peut-être résoudre votre problème] (https://stackoverflow.com/a/3078427/6002328) –

@Nagy István c'est une solution parfaite. – holycatcrusher

Essayez ceci pour votre CSS:

body { 
    margin: 0; 
} 

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

Source

2017-09-27 08:37:27

Essayez ceci:

html, body { 
    height: 100%; 
} 

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

100% doit filtrer vers le bas de l'élément html ou bien elle ne remplira pas la hauteur de l'écran .

Source

2017-09-27 08:42:04

Rendre l'écran HTML Canvas fit

Répondre

Questions connexes