Exercices sur les canvas HTML 5

page contenant un canvas.

Écrire une page xHTML 5 :

Que se passe-il lorsque le rectangle est plus grand que le canvas ?

Fichier à produire  :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  <title>Dessiner un rectangle</title>
</head>
<body>
  <canvas onclick="alert('yyyy')" id="mon-canvas" width="400" height="400" style="background-color:red">
    Ce texte sera affiché par les navigateurs qui ne supportent pas canvas.
  </canvas>
  <script type="text/javascript">
    var le_canvas = document.getElementById('mon-canvas');
    var le_contexte = le_canvas.getContext('2d');
    le_contexte.fillStyle = "rgba(0,128,128,0.9)";
    le_contexte.strokeStyle = "rgb(255,255,255)";
    le_contexte.lineWidth = 10;
    le_contexte.fillRect(10, 10, 350, 350);
    le_contexte.strokeRect(10, 10, 350, 350);
  </script>
 
  <p><a href="http://validator.w3.org/check?uri=referer">page xHTML validé !</a></p>
</body>
</html>

réponse

si le rectangle est trop grand il est clipé par le canvas.

voir le résultat

dessiner un polygone avec les canvas en HTML 5

Écrire une page HTML 5 :

Fichier à produire  :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
  <title>Dessiner un polygone</title>
</head>
<body>
  <canvas id="mon-canvas" width="400" height="400" style="background-color:#000">
    Ce texte sera affiché par les navigateurs qui ne supportent pas canvas.
  </canvas>
  <script type="text/javascript">
    var le_canvas = document.getElementById('mon-canvas');
    var le_contexte = le_canvas.getContext('2d');
    le_contexte.fillStyle = "rgba(128,128,128,0.9)";
    le_contexte.strokeStyle = "rgb(255,0,0)";
    le_contexte.lineWidth = 10;
    le_contexte.beginPath();
    le_contexte.moveTo(100, 20);
    le_contexte.lineTo(20, 200);
    le_contexte.lineTo(20, 300);
    le_contexte.lineTo(100, 350);
    le_contexte.lineTo(350, 350);
    le_contexte.lineTo(300, 40);
    le_contexte.fill();
    le_contexte.stroke();
  </script>
  <p><a href="http://validator.w3.org/check?uri=referer">page xHTML validé !</a></p>
</body>
</html>
voir le résultat

dessiner un arc de cercle avec les canvas en HTML 5

Écrire une page HTML 5 :

Fichier à produire  :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  <title>Dessiner des arcs de cercle</title>
</head>
<body>
  <canvas id="mon-canvas" width="400" height="400" style="background-color:#000">
    Ce texte sera affiché par les navigateurs qui ne supportent pas canvas.
  </canvas>
  <script type="text/javascript">
    var le_canvas = document.getElementById('mon-canvas');
    var le_contexte = le_canvas.getContext('2d');
    le_contexte.fillStyle = "rgba(255,255,200,0.7)";
    le_contexte.strokeStyle = "rgb(128,255,128)";
    le_contexte.lineWidth = 10;
    le_contexte.beginPath();
 
    le_contexte.arc(200, 200, 100, 0, Math.PI, true);
    le_contexte.arc(200, 200, 70, 0, Math.PI, false);
    le_contexte.arc(200, 200, 40, 0, Math.PI, true);
 
    le_contexte.fill();
    le_contexte.stroke();
  </script>
  <p><a href="http://validator.w3.org/check?uri=referer">page xHTML validé !</a></p>
</body>
</html>
voir le résultat

dessiner une zone sur une image avec canvas en HTML 5

Écrire une page HTML 5 :

Il faudra faire attention au temps pris par le chargement de l'image, et donc ne commencer le traitement qu'une fois que l'image aura été complètement chargée. Dans le cas contraire on aura un comportement erratique dépendant des conditions de courses des processus chargement/traitement.
L'appel du traitement peut se faire par un handler positionné sur la fin du chargement de l'image par sa méthode addEventListener('load', fonction_de_traitement, false).

Fichier à produire  :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  <title>modifier le rendu sur une image</title>
  <script type="text/javascript">
    window.onload = function () {  
	var ctx = document.getElementById('mon-canvas').getContext('2d');
	var img = new Image();
	img.src = 'g20s.jpg';
	img.addEventListener('load', function () {
	    ctx.drawImage(img,0,0);
 
	    ctx.fillStyle = "rgba(255,128,128,0.5)";
	    ctx.strokeStyle = "rgb(255,0,0)";
	    ctx.lineWidth = 2;
 
	    ctx.beginPath();
	    ctx.arc(330, 240, 50, 0, 2*Math.PI);
	    ctx.fill();
	    ctx.stroke();
	    ctx.clearRect(670,80,100,100);
	}, false);
    }
  </script>
</head>
<body>
  <canvas id="mon-canvas" width="1306" height="720" style="background-color:#000">
    Ce texte sera affiché par les navigateurs qui ne supportent pas canvas.
  </canvas>
  <p><a href="http://validator.w3.org/check?uri=referer">page xHTML validé !</a></p>
</body>
</html>
voir le résultat

réaliser l'insertion d'une image dans canvas par technique AJAX en HTML 5

Écrire une page HTML 5 :

Afin de mettre en application la technique AJAX fondée sur l'utilisation de XMLHttpRequest(), nous aurons recours à l'ouverture d'un fichier distant tel que celui-ci contenant l'URL de l'image à afficher.

Cet exercice n'est réalisable que par l'utilisation du transfert via HTTP. Dans le cas contraire l'appel de XMLHttpRequest() restera sans réponse.

Fichier à produire  :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
  <title>modifier le rendu sur une image</title>
  <script type="text/javascript">
    function loadCanvas(dataURL){
	var canvas = document.getElementById("mon-canvas");
	var context = canvas.getContext("2d");
 
	// chargement de l'image à partir de son URL
	var imageObj = new Image();
	imageObj.onload = function(){
            context.drawImage(this, 0, 0);
	};
	imageObj.src = dataURL;
    }
 
    window.onload = function(){
	// Mise en place d'AJAX pour récup de l'url de l'image
	var request = new XMLHttpRequest();
	request.open("GET", "dataURL.txt", true);
	request.onreadystatechange = function(){
            if (request.readyState == 4) {   // On vérifie que le document est prêt à être analysé.
		if (request.status == 200) { // Si transfert correct on affiche l'image par son URL.
                    loadCanvas(request.responseText);
		}
            }
	};
	request.send(null);
    };
  </script>
</head>
<body>
  <canvas id="mon-canvas" width="500" height="300">
    Ce message indique que ce navigateur est vétuste car il ne supporte pas <samp>canvas</samp> (IE6, IE7, IE8, ...)
  </canvas>
  <p><a href="http://validator.w3.org/check?uri=referer">page xHTML validé !</a></p>
</body>
</html>
voir le résultat

réaliser un parcours d'image type panorama avec canvas HTML 5

Écrire une page HTML 5 :

Fichier à produire  :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
  <title>Faire défiler une image</title>
  <style>
    canvas {background-color:#633}
  </style>
  <script type="text/javascript">
    var cvs;
    var ctx;
    var img;
    var last = 0;
    var speed = 0;
    var shift = {x:0,y:0};
    var mouse = {x:0,y:0};
    var tmt;
 
    function init(){
	img = new Image();
	img.src = "test_panorama.jpg";
	img.addEventListener('load', initOnImage, false);
    }
 
    function initOnImage(){
	cvs = document.getElementById('mon-canvas');
	ctx = cvs.getContext('2d');
	cvs.width = img.width;  
	cvs.height = img.height;
	cvs.style.border = "10px solid blue";
	ctx.drawImage(img, 0, 0);
	document.onmousedown = onImageClick;
    }
 
    function onImageClick(e) {
	shift.x = last;
	mouse.x = e.pageX;
        clearTimeout(tmt);  //arrêt de l'éffet eventuel d'amorti en cours.
	document.onmousemove = stickImage;
	document.onmouseup = launchImage;
    }
 
 
    function stickImage(e) {
	var xs = e.pageX - mouse.x + shift.x;
	speed = xs - last;  //mémorisation de la vitesse lors de ce déplacement
	putImage(xs);
    }
 
    function launchImage(e) {
	shift.x = e.pageX - mouse.x + shift.x;
	document.onmousemove = null;
	tmt = setTimeout(inertialImage, 100);
    }
 
    function putImage(x) {
	if (x > img.width) {
	    shift.x -= img.width;
	    x -= img.width;
	} else if (x < 0) {
	    shift.x += img.width;
	    x += img.width;
	}
	ctx.drawImage(img, x - img.width, 0, img.width, img.height);
	ctx.drawImage(img, x, 0, img.width, img.height);
	last = x;
    }
 
    function inertialImage() {
	speed *= 0.8;
	if (Math.abs(speed) > 2) {
	    putImage(last+speed);
	    tmt = setTimeout(inertialImage, 100);
	}
    }
 
    window.onload = init;
  </script>
</head>
<body>
  <canvas id="mon-canvas">
    Ce message indique que ce navigateur est vétuste cat il ne supporte pas <samp>canvas</samp> (IE6, IE7, IE8, ...)
  </canvas>
  <p><a href="http://validator.w3.org/check?uri=referer">page xHTML validé !</a></p>
</body>
</html>
voir le résultat

utiliser les transformations sur les canvas en HTML 5

Écrire une page HTML 5 :

Fichier à produire  :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
  <title>Utilisation de transformations dans les canvas</title>
  <script type="text/javascript">
    function drawSpirograph(ctx, R, r, O){
	var x1 = R-O;
	var y1 = 0;
	var i  = 1;
	ctx.beginPath();
	ctx.moveTo(x1, y1);
	do {
	    if (i > 20000) break;
	    var x2 = (R+r)*Math.cos(i*Math.PI/72) - (r+O)*Math.cos(((R+r)/r)*(i*Math.PI/72))
	    var y2 = (R+r)*Math.sin(i*Math.PI/72) - (r+O)*Math.sin(((R+r)/r)*(i*Math.PI/72))
	    ctx.lineTo(x2, y2);
	    x1 = x2;
	    y1 = y2;
	    i++;
	} while (x2 != R-O && y2 != 0 );
	ctx.stroke();
    }
 
    function draw() {
	var ctx = document.getElementById('mon-canvas').getContext('2d');
	ctx.strokeStyle = "#fc0";
	ctx.lineWidth = 1.5;
	ctx.fillRect(0, 0, 300, 300);
 
	// Mise à l'échelle uniforme
	ctx.save()
	ctx.translate(50, 50);
	drawSpirograph(ctx, 22, 6, 5);  // pas de mise à l'échelle
 
	ctx.translate(100, 0);
	ctx.scale(0.75, 0.75);
	drawSpirograph(ctx, 22, 6, 5);
 
	ctx.translate(133.333, 0);
	ctx.scale(0.75, 0.75);
	drawSpirograph(ctx, 22, 6, 5);
	ctx.restore();
 
	// Mise à l'échelle non uniforme (direction y)
	ctx.strokeStyle = "#0cf";
	ctx.save()
	ctx.translate(50, 150);
	ctx.scale(1, 0.75);
	drawSpirograph(ctx, 22, 6, 5);
 
	ctx.translate(100, 0);
	ctx.scale(1, 0.75);
	drawSpirograph(ctx, 22, 6, 5);
 
	ctx.translate(100, 0);
	ctx.scale(1, 0.75);
	drawSpirograph(ctx, 22, 6, 5);
	ctx.restore();
 
	// Mise à l'échelle non uniforme (direction x)
	ctx.strokeStyle = "#cf0";
	ctx.save()
	ctx.translate(50, 250);
	ctx.scale(0.75, 1);
	drawSpirograph(ctx, 22, 6, 5);
 
	ctx.translate(133.333, 0);
	ctx.scale(0.75, 1);
	drawSpirograph(ctx, 22, 6, 5);
 
	ctx.translate(177.777, 0);
	ctx.scale(0.75, 1);
	drawSpirograph(ctx, 22, 6, 5);
	ctx.restore();
    }
    window.onload = draw;
  </script>
</head>
<body>
  <h1>Utilisation de transformations dans les canvas</h1>
  <canvas id="mon-canvas" width="300" height="300" style="background-color:#000">
    Ce texte sera affiché par les navigateurs qui ne supportent pas canvas.
  </canvas>
  <p><a href="http://validator.w3.org/check?uri=referer">page xHTML validé !</a></p>
</body>
</html>
voir le résultat

réaliser une horloge à aigüilles avec canvas en HTML 5

Écrire une page HTML 5 contenant un canvas.

Dans ce ce canvas animer une horloge indiquant les heures, les minutes et les secondes.

Fichier à produire  :

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
  <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
  <title>Affichage de l'heure</title>
  <script type="text/javascript">
    function init(){
	clock();
	setInterval(clock, 1000);
    }
 
    function clock(){
	var now = new Date();
	var ctx = document.getElementById('mon-canvas').getContext('2d');
	ctx.save();
	ctx.clearRect(0,0,150,150);
	ctx.translate(75,75);
	ctx.scale(0.4,0.4);
	ctx.rotate(-Math.PI/2);
	ctx.strokeStyle = "black";
	ctx.fillStyle = "white";
	ctx.lineWidth = 8;
	ctx.lineCap = "round";
 
	// marque des heures
	ctx.save();
	for (var i=0; i!=12; i++){
	    ctx.beginPath();
	    ctx.rotate(Math.PI/6);
	    ctx.moveTo(100,0);
	    ctx.lineTo(120,0);
	    ctx.stroke();
	}
	ctx.restore();
 
	// marque des minutes
	ctx.save();
	ctx.lineWidth = 5;
	for (i=0; i!=60; i++){
	    if (i%5!=0) {
		ctx.beginPath();
		ctx.moveTo(117,0);
		ctx.lineTo(120,0);
		ctx.stroke();
	    }
	    ctx.rotate(Math.PI/30);
	}
	ctx.restore();
 
	var sec = now.getSeconds();
	var min = now.getMinutes();
	var hr  = now.getHours();
	hr = hr>=12 ? hr-12 : hr;
 
	ctx.fillStyle = "black";
 
	// écriture des heures
	ctx.save();
	ctx.rotate( hr*(Math.PI/6) + (Math.PI/360)*min + (Math.PI/21600)*sec )
	ctx.lineWidth = 14;
	ctx.beginPath();
	ctx.moveTo(-20,0);
	ctx.lineTo(80,0);
	ctx.stroke();
	ctx.restore();
 
	// écriture des minutes
	ctx.save();
	ctx.rotate( (Math.PI/30)*min + (Math.PI/1800)*sec )
	ctx.lineWidth = 10;
	ctx.beginPath();
	ctx.moveTo(-28,0);
	ctx.lineTo(112,0);
	ctx.stroke();
	ctx.restore();
 
	// écriture des secondes
	ctx.save();
	ctx.rotate(sec * Math.PI/30);
	ctx.strokeStyle = "#D40000";
	ctx.fillStyle = "#D40000";
	ctx.lineWidth = 6;
	ctx.beginPath();
	ctx.moveTo(-30,0);
	ctx.lineTo(83,0);
	ctx.stroke();
	ctx.beginPath();
	ctx.arc(0,0,10,0,Math.PI*2,true);
	ctx.fill();
	ctx.beginPath();
	ctx.arc(95,0,10,0,Math.PI*2,true);
	ctx.stroke();
	ctx.fillStyle = "#555";
	ctx.arc(0,0,3,0,Math.PI*2,true);
	ctx.fill();
	ctx.restore();
 
	ctx.beginPath();
	ctx.lineWidth = 14;
	ctx.strokeStyle = '#325FA2';
	ctx.arc(0,0,142,0,Math.PI*2,true);
	ctx.stroke();
 
	ctx.restore();
    }
    window.onload = init;
  </script>
</head>
<body>
  <canvas id="mon-canvas">
    Ce texte sera affiché par les navigateurs qui ne supportent pas canvas.
  </canvas>
  <p><a href="http://validator.w3.org/check?uri=referer">page xHTML validé !</a></p>
</body>
</html>
voir le résultat
pages validées par Valid XHTML 1.1 CSS validé !