Dans ce nouveau cours sur l’API JavaScript Canvas vous allez apprendre à utiliser les effets de transparence pour votre application web ou pour votre jeu.
Tout est dans la vidéo ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
Comment utiliser les effets de transparence avec Canvas en JavaScript
Bonjour à tous et bienvenu sur Développement Facile.
Ici Matthieu experts en développement applicatif, dans ce nouveau cours vous allez apprendre à utiliser la transparence avec l’API Canvas pour JavaScript. On continu la suite des cours justement dédiée à la création des graphismes d’un jeu vidéo, des interfaces d’une application tout ça en utilisant la balise Canvas, là vous allez apprendre à faire des effets de transparence entre plusieurs éléments, plusieurs formes.
Canvas avec JavaScript
Il suffit d’utiliser l’attribut contexte global alpha et donc cet attribut peut avoir une valeur qui va de zéro ou c’est totalement transparent à un ou la forme est opaque, la forme s’affiche entièrement donc zéro, un, vous pouvez le transformer en pourcentage pour que ce soit plus compréhensible 0 % c’est entièrement transparent et plus vous montez jusqu’à 100 %, un et ce sera totalement opaque, vous mettez des valeurs, 0,10 0,20, 0,30 pour définir la transparence de l’élément et ainsi voir les éléments en dessous et créer justement des interfaces, des graphismes de jeu vidéo avec des effets de de transparences.
Il faut savoir que un effet de transparence ça prend plus de ressources JavaScript, côté client sur le Smartphone, la tablette ou l’ordinateur de votre visiteur, et vous pouvez également déterminer la manière dont vos éléments sont positionnés les uns par rapport aux autres justement, pour la transparence, vous avez un empilement des éléments, comme sur une image donc vous pouvez définir leurs positions via l’attribut du contexte global composition opération ça va vous permettre de définir leurs positionnements et la façon d’afficher différents les différents éléments qui se superposent les uns sur les autres.
Là je vous ai listé les différentes valeurs de globale composite opération donc pour les éléments, je ne vais pas tous vous les détailler donc vous aurez juste à lire à la présentation sur le côté pour comprendre, avoir toutes les explications moi je préfère me concentrer sur le code source et vous montrer concrètement visuellement ce que ça donne pour tous les paramètres, comme ça vous aurez tous les paramètres source-over, source-in, source-out, source-atop, copy et xor et la représentation visuelle donc graphique de ce que ça donne comme résultat donc mettez simplement cette vidéo sur pause pour pouvoir lire toutes les valeurs, les paramètres pour la première liste de paramètres, là voici la deuxième liste de paramètres destination-in, destination-out, destination-over, destination-atop, lighter, donc pareil à travers l’exemple de code source vous allez voir le résultat graphique de ce que ça donne, donc mettez simplement cette vidéo sur pause et lisez l’ensemble des paramètres mais prenez le temps de lire pour comprendre leurs fonctionnements.
Maintenant on passe ensemble à un exemple de code source ou je vais vous montrer justement d’une manière visuelle comment gérer les transparences entre plusieurs formes et comment gérer leurs positions grâce aux différents paramètres que vous venez de voir, c’est parti pour l’exemple de code source. Alors comme d’habitude vous intégrez votre fichier JavaScript, votre fichier CSS donc le CSS toujours le même, votre fichier JavaScript vous avez donc deux balises canvas, cette balise canvas, ici pour l’exemple de transparence et une autre balise canvas qui va être renseignée grâce à JavaScript et dedans, il y a une grande balise qui regroupe toutes les petites balises canvas, ce qui vous montre bien, ça vous fait l’occasion d’avoir un exemple avec plusieurs appels l’API canvas dans des différents éléments ici ça va créer un tableau, alors comme d’habitude une fois que le DOM est chargé on appelle notre fonction de dessin, on récupère le contexte et on va dessiner trois rectangles mais on va les positionner à des endroits où il se chevauchent tout simplement, 20 en X, 20 en Y, 150 en X, 50 en Y, 280 en X on se décalle, et on se décale aussi à 80 pixels en Y, avec des couleurs différentes et on va jouer sur la transparence donc zéro on le voit pas, un on le voit totalement, donc on change la transparence de notre contexte et aussi on montre les positions des éléments, donc qu’est-ce que ça donne ?
Premier rectangle, effet de transparence et également effet de transparence, je peux bien évidemment les rapprocher si je mets 270 ici, 140 donc on va mettre 260, une transparence un peu moins poussée et donc je recharge la page, voilà, il y a moins d’effet de transparence et si je mets à un l’effet de transparence va complètement disparaître, voilà donc il n’y a aucun effet de transparence comme vous pouvez le voir, je vais revenir à 03 avec un effet transparence, et juste en dessous, on appelle la fonction draw composite ça va vous montrer toutes les positions des éléments en fonction de l’option choisie, vous pouvez dans vos effets de transparence il y a plusieurs options comme je vous l’ai expliqué sur source over, source in, source out etc. et donc là on parcourt tous nos éléments ici et à chaque fois on va montrer l’affichage différent selon l’option qui a été choisie, tout simplement, donc en fait vous avez toutes les options possibles de positionnement de vos éléments entre deux les éléments les uns par rapport aux autres donc là on prend que l’intérieur la ou ils sont recouverts, source top, source in, source out, donc vous voyez les différentes positions l’un par-dessus l’autre, l’un en dessous de l’autre, alors du coup ça vous donne un exemple très complet de ce qui est possible de faire, justement, avec le positionnement pour définir la propriété composite, la position comment gérer l’effet des éléments qui se chevauchent, simplement voici un exemple très concret, très visuel qui vous permet de comprendre chacune des options.
Votre plan d’actions !
Maintenant c’est à vous de jouer, à vous intégrer des éléments de transparence, de gérer la position entre vos différentes formes dans vos canvas, dans vos interfaces d’applications, dans vos jeu vidéo, comme d’habitude vous retrouverez l’exemple de code source en téléchargement sous ce cours vidéo, si vous avez des questions posez-les également directement sous ce cours vidéo l’équipe développement facile sera ravie de vous répondre et de vous aider, et maintenant je vous retrouve là, dans la deuxième vidéo il suffit de cliquer sur l’image, sur le lien qu’il y a juste au-dessus moi, lancer la deuxième vidéo, dans la deuxième vidéo vous allez aller beaucoup plus loin dans le développement d’applications pour les Smartphones, les tablettes, les ordinateurs de bureau avec JavaScript, HTML 5, CSS 3, vous pourrez même me posez vos questions je créerais des cours adaptés en fonction de vos difficultés, de votre situation, de votre application, de votre jeu, donc je vous détaille tout ça, je vous explique tout ça dans la deuxième vidéo, donc cliquez simplement sur l’image, sur le lien ici lancer la deuxième vidéo. Je vous dis à tout de suite dans la deuxième vidéo.
[/ppmtoggle][/ppmaccordion]
Télécharger l’exemple d’effets de transparence avec Canvas
Retrouvez le code source commenté d’une implémentation des effets de transparence avec l’API JavaScript Canvas
Téléchargement du code source Canvas JavaScript Transparence
