Exercices sur les canvas HTML 5

page contenant un `canvas`.

Écrire une page xHTML 5 :

contenant un canvas dont la couleur de fond sera rouge
afficher dans ce canvas un rectangle de couleur différende de celle du fond.
donner au rectangle un contour blanc de 10 pixels de large.

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 :

contenant un canvas
dessiner dans ce canvas un polygone de 6 cotés
donner une couleur de contour à ce polygone

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 :

contenant un canvas
dessiner dans ce canvas des arcs de cercle

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 :

contenant un canvas
charger cette image nans le canvas
le canvas aura pour dimension 1306x720 pixels
placer un cercle rouge semi-transparent de 50 pixels de rayon aux coordonnées 330 (horizontal) et 240 (vertical)
éffacer la zone rectangulaire de 100x100 pixels placée aux coordonnées 670 (horizontal) et 100 (vertical)

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 :

contenant un canvas
À l'aide de la méthode XMLHttpRequest() (technique AJAX) afficher dans ce canvas une image provenant d'un site distant, par exemple celle-ci.

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 :

contenant un canvas
À l'aide d'un script javascript charger une image permettant le rebouclage horizontal telle que celle-ci,
Faire en sorte que :
- les dimensions du canvas correspondent à celles de l'image,
- les actions à la souris sur le canvas fassent défiler horizontalement l'image et ce sans limite.
- Pour aller plus loin, simuler un comportement inertiel amortissant l'arrêt du défilement.

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 :

contenant un canvas
dessiner dans ce canvas des figures en applicant successivement :
- des translations,
- des rotations,
- des grossissements,

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>

Exercices sur les canvas HTML 5

page contenant un canvas.

Fichier à produire :

réponse

dessiner un polygone avec les canvas en HTML 5

Fichier à produire :

dessiner un arc de cercle avec les canvas en HTML 5

Fichier à produire :

dessiner une zone sur une image avec canvas en HTML 5

Fichier à produire :

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

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 :

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

Fichier à produire :

utiliser les transformations sur les canvas en HTML 5

Fichier à produire :

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

Fichier à produire :

page contenant un `canvas`.

dessiner un polygone avec les `canvas` en HTML 5

dessiner un arc de cercle avec les `canvas` en HTML 5

dessiner une zone sur une image avec `canvas` en HTML 5

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

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.

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

utiliser les transformations sur les `canvas` en HTML 5

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