Canvas : translation et transparence de formes

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 (comme l'indique la console JS) car les attributs "width" & "height" sont absents de la balise canvas.
300 par 150 sont les valeurs par défaut du système de coordonnées.

		...
		// 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