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.

Affichez la console JS !

Le script

Pour le script le canevas fait 300 par 150 car les attributs width & height sont absents de la balise canvas.

		...
		// canevas référence la balise canvas
		var X=canevas.width;
		var Y=canevas.height;
		console.log(X); 
		console.log(Y); 
		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