Transformation du canevas - translation

Le canevas

Sept carrés de couleurs différentes mais avec la même transparence.
Chaque carré décalé par rapport au précédent de quelques pixels.

Le code de la page

Le CSS

... @media screen and (min-width: 900px) {canvas {width : 80% ; height : 400px; }} @media screen and (max-width: 899px) {canvas {width : 80% ; height : 200px; }} ...

Le canevas fait 80% de large et 400 ou 200 de haut selon la largeur de l'écran.

Le HTML

... <canvas></canvas> ...

On ne peut plus basique ...

Le script

		...
		// canevas référence la balise canvas
		var X=canevas.width;
		var Y=canevas.height;
		var delta = 20; 
		var cote = 50;
		var rouge = 255; var vert = 0; var bleu = 0; 
		var couleur;;
		contexte.globalAlpha = 0.5; // 50% opacité pour tous les tracés futurs
		for (i=1; i<=7; i++)
		{
			rouge-=30 ; vert+=30; bleu+=30;
			couleur = "rgb("+ rouge+","+vert+","+bleu+")" ; 
			contexte.fillStyle = couleur ;
			contexte.fillRect(0,0,cote,cote) ; 
			contexte.translate(delta,delta) ; // déplacement origine pour rectangle suivant
		} // fin for 
		...
	

Examinons maintenant plus en détail certains instructions du script !

var rouge = 255; var vert = 0; var bleu = 0; : le code RGB initial est rouge (mais à demi opaque puisque : contexte.globalAlpha = 0.5;)


Retour menu