[HTML5] La balise canvas et la balise img

Actuellement, HTML attire beaucoup de gens car il permet de faire des jeux (comme BrowserQuest). Très intéressant n’est-ce pas ? Eh oui, moi aussi je me suis laissé tenté !:mrgreen: Cela étant dit, je me suis trouvé bien embêté ces derniers jours avec ma balise <canvas> car jusqu’à présent à ma connaissance elle ne me permettait que de tracer des dessins, un truc de fou ! :)Certes un truc de fou…Mais…Moi je voulais importer une image. Et là vous intervenez : « Ben suffit de mettre une balise <img> ! » Oui mais pas n’importe où et n’importe comment !😮

Inclure la balise <canvas>

La balise canvas, balise nouvelle génération, permet d’inclure du dessin, des objets… Je vous conseille de faire un petit tour sur le site MDN (Mozille Developer Network) pour vous document sur cette balise.

En résumé quand vous créez votre site internet, voici sa structure :

<!DOCTYPE html>
<html>
<head>
<title>You've been trolled uh oh</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
</body>
</html>

Vous insérez votre balise <canvas> dans <body> comme ceci :

<body>
<canvas></canvas>
</body>

Cela dit je vous conseille sans plus tarder de mettre ceci :

<canvas>Votre navigateur ne supporte pas HTML5, veuillez le mettre à jour.</canvas>

Ainsi, si votre naviguateur ne visualise pas le canevas, vous saurez si c’est parce que votre code ne fonctionne pas ou si votre navigateur est obsolète (dans ce cas là eh bien il ne reste plus qu’à le mettre à jour hihi :P)

Ce qui vous donne au final pour l’instant cela :

<!DOCTYPE html>
<html>
<head>
<title>You've been trolled uh oh</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<canvas id="canvas">Votre navigateur ne supporte pas HTML5, veuillez
le mettre à jour pour jouer.</canvas>
<script>
window.onload = function() {
	var canvas = document.getElementById('canvas');
	var ctx = canvas.getContext('2d');

	// Nous allons insérer nos tests ici
}
</script>
</body>
</html>

❓ Mais d’où sort ce code :

<script>
window.onload = function() {
	var canvas = document.getElementById('canvas');
	var ctx = canvas.getContext('2d');

	// Nous allons insérer nos tests ici
}
</script>

Eh bien, ce code est du…Javascript !! Il permet de déclarer l’objet canvas sinon vous ne verrez rien sur votre ordinateur ! Bon je vous le dis tout de suite vous n’êtes pas obligé de suivre la structure que j’ai choisie. Puis, il y a une façon plus…comment dire… »simple » (?) :

<script>
	//On récupère l'objet canvas.
	var canvas = document.getElementById('canvas');.
	//On récupère le contexte 2D.
	var context = canvas.getContext('2d');

</script>

Là, tout de suite c’est plus simple !😀

Bon, bon admettons… Mais et mon image suffit d’une balise dans body non ?
Et bien l’ennui, et vous le verrez si vous en faîtes l’expérience, c’est que l’image ne sera pas lié au canvas. Tout comme si votre balise p est à coté de la balise a :

<p>balise paragraphe</p>
<a>balise a</a>

La balise a ne fera jamais partie de la balise p.
Bon d’accord j’ai compris vous voulez le code allez voici mes braves :

<html>
<head>
<title>.: Jeu :.</title>
<meta charset="utf-8">
<style>
body
{
background:#EBEBEB;
}
</style>

</head>
<body>
     <!-- Creation of the canvas -->
	 <!-- First, create <canvas> -->

		<canvas id="canvas" width="800" height="600" oncontextmenu="return false;" onselectstart="return false;">
		 <img id="background" src="images/monimage.png"/>
		  </canvas>
	 <!-- Then, create the js file -->
	<script>
	var canvas = document.getElementById('canvas');
	var context = canvas.getContext('2d');
	var htmlImg = document.getElementById("html5Img");
	context.drawImage(background, 0, 0);

</script>
</body>
</html>

N’hésitez pas à nous contacter pour plus d’informations !😉

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s