Pluie de bonnes nouvelles : sortie de Symfony 3.0 et de PHP 7

A chaud, plein de bonnes nouvelles ces derniers jours : la sortie de PHP7 ainsi que celle de la version 3.0 du framework PHP Symfony ! De quoi faire une petite révolution dans notre vie professionnelle. Petits retours pour ce qui va changer pour moi.

Continuer la lecture de Pluie de bonnes nouvelles : sortie de Symfony 3.0 et de PHP 7

Tuto : comment afficher un canvas HTML en fullscreen

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

Depuis quelque temps je m’intéresse au canvas et plus particulièrement leurs utilisations pour créer des jeux mobiles avec Apache Cordova. À chaque début de projet on se retrouve souvent bloqué avec cette histoire de taille de canvas qui demeure frustrante alors que nous devons mettre l’accent sur d’autres problématiques plus importantes. C’est pour cette raison que j’ai décidé de rédiger ce tutoriel qui j’espère aidera le plus grand nombre à se lancer dans la création de canvas prenant 100 % de l’espace disponible dans la page web! 🙂
Plus une minute à perdre voici le petit tuto !

1/ Création du canvas : le fichier HTML

image logo html 5 pour l'article sur les canvas

Dans un premier temps il suffit de créer un fichier HTML5 basique avec votre éditeur de texte préféré.
Lorsque cela est fait, on ajoute alors 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.

Je pense que vous n’avez pas besoin de plus d’explications. Les commentaires sont assez explicites pour cette partie. Pour plus d’informations je vous invite à aller sur le MDN de Mozilla qui possède des bons tutoriels concernant les canvas.

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.

Un début à tout

Bonjour à tous,

Je m’appelle Corentin et je suis un jeune développeur Web, j’utilise de nombreuses technologies Web et plus particulièrement le Framework Symfony 2. J’ai terminé depuis peu ma formation par alternance que j’ai réalisé a l’Université Lyon 1 et je suis actuellement en poste depuis le mois d’Octobre.
Je me suis enfin décidé à écrire mon propre Blog pour partager avec vous, mes découvertes et astuces sur le vaste sujet du Web.
En attendant, de futures publications je vous conseil d’aller faire un tour sur le Blog de mon Entreprise, Wanadev.

En espérant que mes articles vous plairons. A bientôt :-).

bye