Small codes

HTML5, Javascript and AS3

Tutoriel : passer en plein écran le HTML5 canvas et d’autres éléments du DOM

| 9 Commentaires

Voici la recette que j’utilise pour ajouter une fonctionnalité fullscreen à la balise canvas dans le navigateur.

En premier lieu, je pense qu’il faut différencier deux concepts : le fullscreen du navigateur et le fullscreen dans le navigateur ou pleine fenêtre.

Le plein écran du navigateur est activé par l’utilisateur avec la touche F11. Le navigateur étends alors sa fenêtre sur l’ensemble de l’écran, et escamote ses barres d’outils. On trouve sur le net quelques exemples de scripts permettant de forcer ce comportement, mais ils ne sont ni comptatibles avec tous les navigateurs, ni une bonne pratique : l’utilisateur doit pouvoir choisir son propre mode de navigation. Sinon, il peut se retrouver face à des problèmes d’accessibilité.

Le plein écran dans le navigateur n’est pas un véritable plein écran : on l’appelle souvent le full-window. Il force la taille d’un élément du DOM de la page web chargée à se conformer aux limites de la fenêtre du navigateur. Cette pratique est mieux considérée. L’utilisateur peut compléter son expérience en plein écran avec la touche F11 s’il le désire.

C’est ce comportement que nous allons essayer de reproduire.

Construction de la page HTML et de sa feuille CSS


Nous allons réaliser une page simple contenant un canvas. Le canvas présentera une animation créée avec EaselJS.
J’ai ajouté un wrapper englobant le titre et le canvas : dans une page web, votre canvas sera rarement placé directement sous le corps de votre page.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" >
		<title>Tutorial: Full-window canvas mode with CreateJS</title>

		<script src="http://code.createjs.com/easeljs-0.4.2.min.js" >  </script>
		<script src="http://code.createjs.com/tweenjs-0.2.0.min.js" >  </script>
		<link rel="stylesheet" href="css/style_start.css" >

		<script>
		var canvas,
			wrapper,
			stage,
			shape;
		
		function init(){
			var g;
			canvas = document.getElementById("canvas");
			wrapper = document.getElementById("wrapper");
			
			stage = new Stage(canvas);
			
			g = new Graphics();
			g.setStrokeStyle(1);
			g.beginStroke(Graphics.getRGB(0,0,0));
			g.beginFill(Graphics.getRGB(255,0,0));
			g.drawCircle(0,0,100);
			
			shape = new Shape(g);
			shape.x = 400;
			shape.y = 300;
			stage.addChild(shape);
			
			Ticker.setFPS(32);
			Ticker.addListener(stage);
			
			animate();
		}
		
		function animate(){
			var tween;
			tween = Tween.get(shape)
					.to({x:Math.random()*canvas.width,y:Math.random()*canvas.height},1000,Ease.cubicOut)
					.call(animate);
		}
		
		window.onload = init;
		</script>
	</head>
	 <body>
		 <div id="wrapper" class="wrapperNormal">
			<H1>Tutorial: Fullscreen canvas mode with CreateJS</H1>
			 <canvas id="canvas" class="canvasNormal" width="800" height="600">
				<p>Your browser is sooooo old! Update or download a modern one now!</p>
			 </canvas>
		 </div>
	</body>
</html>

Et voici le CSS :

body{
	font-family: 'Arial', sans-serif;
	font-size: 0.8em;
}

.canvasNormal{
	position: relative;
	background-color: #000000;
}
.wrapperNormal{
	width: 900px;
	margin: auto;
}

Vous pouvez voir ici à quoi ressemble notre page de départ.

Création d’une fonction de full-window


Nous allons commencer par ajouter la fonction de full-window et rajouter un gestionnaire onclick sur le canvas lui-même. Il suffira ainsi de cliquer n’importe où dans le canvas pour passer d’un état à l’autre.

Tout d’abord, pour gérer l’état, nous créons une variable booléenne fullWindowState.

var canvas,
	wrapper,
	stage,
	shape,
	fullWindowState;

Nous créons ensuite la fonction fullWindow, qui permet de changer la taille du canvas, ainsi que sa classe CSS. A noter que je change aussi la classe de son wrapper, afin d’éviter des dépassements de page pouvant amener les scrollbars du navigateur à se montrer, ce que nous ne voulons pas.

function fullWindow(e) {
	if (!fullWindowState) {
		fullWindowState= true;
		// Canvas goes full window
		canvas.className = "canvasFullWindow";
		wrapper.className = "wrapperFullfullWindow";
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;
	} else {
		fullWindowState= false;
		//canvas goes normal
		canvas.width = 800;
		canvas.height = 600;
		canvas.className = "canvasNormal";
		wrapper.className = "wrapperNormal";
	}
}

Et nous ajoutons l’écoute de l’évenement sur le canvas :

<canvas id="canvas" class="canvasNormal" width="800" height="600" onclick="fullWindow(this)" >
	<p>Your browser is sooooo old! Download a modern one now! </p>
</canvas>

Il nous reste à ajouter ces règles dans la feuille CSS :

.canvasFullWindow{
	position: absolute;
	background-color: #000000;
	top: 0px;
	left: 0px;
}

.wrapperFullWindow{
}

La règle vide pour le wrapper est nécessaire.

Si nous rajoutons un règles de type « width: 100%; height= 100%; sur notre canvas dans le CSS, nous augmentons ses dimensions, mais aussi la taille de rendu. Nous obtiendrons donc un effet de pixelisation. Cet effet peut être souhaité : le pixel art est encore à la mode !

Vous pouvez voir ici ce que nous obtenons.
Au clic sur le canvas, il s’étend proprement sur l’ensemble de la fenêtre. Mais si nous redimensionnons la fenêtre, ou si nous passons en véritable fullscreen avec F11, nous perdons l’effet, avec des scrollsbar ou des blancs qui peuvent apparaître.
Pour maintenir le full-window en cas de redimensionnement, nous devons donc gérer cet évènement.

Prise en compte de l’évènement window.onresize


Nous allons juste ajouter la fonction onResizeHandler() pour redimensionner proprement le canvas en cas de changement de taille de la fenêtre…

function onResizeHandler(e){
	if (fullWindowState){
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;
	}
}

… et nous rajoutons l’écoute de l’évènement onresize sur l’objet window, en pointant notre fonction de callback.

window.onresize = onResizeHandler;

Voici enfin le résultat. L’effet de full-window est parfait sur tous les navigateurs les plus récents, y compris en cas de redimensionnement de la fenêtre, ou d’appuis sur la touche F11.

Un mot sur l’API Fullscreen


Les spécifications d’une API Fullscreen sont toujours en construction par le W3C, mais les navigateurs Firefox, Chrome and Safari les ont déjà inclues à titre expérimental. On peut trouver quelques conseils d’implémentation multibrowsers ici, mais la spécification n’étant pas encore finalisée, il est trop tôt pour l’utiliser.
Voici au cas où un tutoriel très bien fait.

Conclusion


Nous avons pu mettre en place une fonctionnalité souple de full-window, de manière simple, qui va fonctionner sur tous les navigateurs. Il est possible de redimensionner la fenêtre, de passer le navigateur lui-même en plein écran, et notre élément canvas s’adaptera.
Bien sûr, cela fonctionne pour un canvas, mais aussi pour n’importe quel div ou élément HTML de type block.

9 Commentaires

  1. I’m currently making an HTML5 game and this was a pretty smart solution to making it fullscreen. Thanks.

  2. Pingback : 30 Must-See HTML5 Tutorials to Help You Impress Your Audience | Developer Junk

  3. Pingback : 30 Must-See HTML5 Tutorials to Help You Impress Your Audience | Web Dezining

  4. Pingback : 30 Must-See HTML5 Tutorials to Help You Impress Your Audience

  5. Pingback : 30 Tutoriais HTML5 para ajudar você a impressionar o seu público | Site para Empresas – Blog sobre Internet e Criação de Site

  6. Bonjour,
    merci pour ces tutoriels très utiles,
    mais je code tout à partir de scripts externes en AS3,
    et je ne parviens pas à les implémenter à l’aide de CreateJS.
    Sauriez-vous quelle est la manipulation, s’il y en a une ?
    Bonne journée
    Max

  7. Pingback : Roundup: 50 Top Notch HTML5 Tutorials | Design Superstars

  8. Pingback : 30 Must-See HTML5 учебники, чтобы помочь вам впечатлить аудиторию | Allbloggg.ru - блог о всем. Только свежие новости со всего мира всех тем. Веб-дизайн, ди

  9. Pingback : Best HTML5 Tutorials to Help You Impress Your Audience | HueDesigner

Laisser un commentaire

Champs Requis *.


Social Widgets powered by AB-WebLog.com.