Canvas

Méthodologie de création d’un canvas en plein écran : pas à pas

1/ Création du canvas : le fichier HTML

Dans un premier temps il suffit de créer un fichier HTML5 basique puis on ajoute une balise canvas qui nous servira de point de départ.

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

2/ Canvas en plein écran : création du fichier CSS

Ensuite dans un second temps, il faut créer un fichier css associé au premier fichier HTML. Dans ce fichier on va alors y mettre :

body, html
{
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

canvas
{
    vertical-align: middle;
}

Ce qui signifie que nous allons supprimer toutes marges intérieures ou extérieures pour les balises body et html. Ce petit bout de CSS sert en fait de reset CSS.
Ensuite on leur indique qu’ils doivent tout deux prendre toute la hauteur et la largeur de l’écran.
Pour terminer la règle vertical-align: middle sert à supprimer les scrollbars pouvant nous embêter dans l’utilisation de notre canvas. Canvas étant une balise de type inline, elle comporte un espace de baseline en dessous d’elle même.

3/ Création du fichier JS

Pour finir, il faut créer un fichier Javascript pour générer le canvas dans la page HTML.

var canv = document.getElementById("canvas"); // Variable canv du canvas
var ctx = canv.getContext("2d"); // Contexte pour pouvoir dessiner dessus.

canv.width = window.innerWidth; // Il va prendre toute la largeur de la fenêtre.
canv.height = window.innerHeight; //  Il va prendre toute la hauteur de la fenêtre.

4/ Votre canvas plein écran est prêt

Voilà vous avez donc à votre disposition un canvas prêt à être utilisé sur toute votre page HTML. Et donc des jeux avec qui prendront tout l’écran : Autant sur mobile que desktop.

Références :

https://medium.freecodecamp.org/how-creating-simple-canvas-games-helped-me-6eef839f450e

https://www.oodlestechnologies.com/blogs/Dynamic-Canvas-in-Cordova-or-Phonegap

https://darchevillepatrick.info/canvas/canvas_menu.htm

https://www.toptal.com/web/making-html5-canvas-based-game-with-angularjs-and-createjs

 

 

Articles récents
Commentaires récents
fatima dans Bienvenue !
AdminDroid dans Bienvenue !
fatima dans Bienvenue !
Archives
Catégories
<span>%d</span> blogueurs aiment cette page :