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

... <body> ... <canvas width ="300" height ="150" style ="width : 60% ; height :auto;"></canvas> ... <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 ...

Pour le script les dimensions du canevas seront toujours 300 par 150 quelque soit les dimensions d'affichage !

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