Aller au contenu

Comment utiliser les dégradés de couleur avec Canvas en JavaScript

On continu ensemble avec l’API JavaScript Canvas.

Dans ce nouveau cours, vous allez apprendre à réaliser des dégradés de couleurs.

Tout est dans la vidéo ci-dessous.

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

Comment utiliser les dégradés de couleur avec Canvas en JavaScript

Bonjour à tous et bienvenu sur Développement Facile.

Ici Matthieu expert en développement applicatif, dans cette nouvelle vidéo vous allez apprendre à utiliser l’API canvas, ça continue les cours précédent,  mais cette fois à créer des dégradés, donc des dégradés de couleurs avec l’API canvas, ces des commandes JavaScript.

Canvas avec JavaScript

C’est partit sans plus attendre, on rentre dans le vif du sujet. Vous pouvez créer deux types de dégradés avec deux fonctions différentes donc des dégradés linéaires le long d’un axe comme ça ou alors des dégradés types radial avec un sens et une extension circulaire donc le dégradé linéaire vous devez utiliser createLinearGradient et pour le dégradé radial vous devez utiliser la fonction createRadialGradient.

Alors les paramètres donc dans CreateLinearGradient c’est relativement simple vu que c’est le long d’un axe le dégradé il suffit de définir cet axe donc le couple X0 Y0 c’est le point de départ de l’axe et le couple X1 Y1 c’est l’arrivée de votre axe, vous définissez deux points et ça vous fait votre axe et le long de cette axe il y aura le dégradé. Pour radial c’est un petit peu plus subtil vous avez le couple X0Y0 c’est le point central du cercle de départ et le couple X1Y1 c’est celui d’arrivée, donc vous avez radial vos point central de votre cercle et X0 c’est le rayon du premier cercle et R1 le rayon du deuxième cercle pour faire votre dégradé radial. Cette fonction ça vous permet de créer un objet de type gradient et cet objet peut être utilisé avec les méthodes fillStyle et strokeStill et ça va vous permettre d’utiliser une couleur de type dégradé donc ça va remplacer votre couleur unie.

Comment faire pour ajouter la couleur, vous devez utiliser la fonction addColorStop pour ajouter la couleur au dégradé donc créez votre dégradé linéaire ou radial maintenant il faut ajouter la couleur grâce à la fonction à addColorStop, ça prend deux paramètres, la position de la couleur et la couleur, la couleur au format RGB, HTML, hexadécimale comme d’habitude et le dégradé c’est un paramètre entre zéro et un donc c’est la position de la couleur dans le dégradé, donc zéro y’a rien et un c’est tout le dégradé et donc vous définissez la position de la couleur, par exemple zéro à 0,20 première couleur, après vous faites add autre couleur donc pour votre dégradé une deuxième couleur de 0,20 à 0,50 après vous prenez une troisième couleur de 0,50 à 1 donc pour créer un dégradé évidemment il faut deux couleurs parce que ça va de la couleur une vers la couleur deux vos dégradés si vous avez une troisième couleur de la couleur deux vers la couleur trois tout simplement, donc vous pouvez ajouter addColorStop minimum deux fois pour avoir une un dégradé entre deux couleurs et vous pouvez ajouter trois fois, trois quartre, cinq fois addColorStop pour faire des dégradés sur plusieurs couleurs, par exemple un arc-en-ciel dégradé ça peut être très sympa.

Voir les exemples JavaScript

Je vais vous montrer tous ça à travers un exemple de code source, je vais vous expliquer concrètement comment fonctionne toute cette méthode donc c’est parti en route pour le code source.

Alors dans cet exemple je vais vous montrer comment créer des dégradés avec l’API Canvas de JavaScript, je ne revient pas dessus, comme d’habitude, vous intégrez votre fichier CSS, votre fichier JavaScript, la balise canvas avec un id, et une taille, le fichier CSS classique, le fichier JavaScript qui est le plus intéressant donc on appelle la méthode draw, dessiné au chargement du DOM, dès que le DOM est chargé, automatiquement cette méthode est appelée, on récupère la balise canvas on créé un contexte en 2D et sur notre contexte, on appel la méthode sur notre object contexte on appelle la méthode créaRadialGradient, c’est pour créer un dégradé de type radial et là pour un dégradé de type linéaire, donc vous renseignez les paramètres de votre dégradé à chaque fois, et ce qui est intéressant c’est que si vous avez des couleurs entre zéro et un, vous pouvez faire comme un pourcentage, vous divisez par 100 votre valeur donc ça vous donne un et 0, 0,28 jusqu’à 0,28 ce sera cette couleur, entre 0,28 et 0,69 ça va tendre vers cette couleur et à la fin ça va tendre vers le bleu donc voici radial, ça fait un cercle, voici un dégradé radial pour faire un dégradé linéaire, la couleur de départ, la couleur intermédiaire, vous pouvez mettre trois couleurs si vous le souhaitez pour rajouter une couleur et la couleur d’arrivée c’est-à-dire là vous avez couleur de départ, intermédiaire, couleur d’arrivée, je vais rajouter une autre couleur, par exemple je vais mettre du gris, tout simplement donc le gris c’est ccc voilà et donc si je recharge ma page, vous voyez première couleur, couleur intermédiaire, la couleur grise ici que l’on voit très bien, ça jure un peu et la couleur de fin, tout simplement.

Bien évidemment pensez à remplir votre forme, vous avez votre forme ici, vous lui donnez un style donc le style radial, là le style linéaire et vous créez un rectangle et donc il va être rempli par le dégradé donc ça vous donne ça radial sous forme de cercle, linéaire avec les quatre couleurs donc vous la voyez bien ici, bien évidemment vous pouvez agrandir la zone intermédiaire il n’y a aucun problème donc ça dire qu’il y aura plus de gris, voilà, on voit bien les dégradés c’est très facile à réaliser, le code vous avez vu qu’il est très simple de créer un dégradé en seulement quelques lignes de code, vous pouvez ajouter autant de couleur que vous le souhaitez, affectez bien votre objet dégradé à fillStyle et effectuer un dessin derrière.

Votre plan d’actions !

Maintenant c’est à vous de jouer vous avez vu un exemple de code source, vous savez comment ça fonctionne, à vous de reproduire les dégradés dans vos canvas, dans vos formes, créez des formes, importez des images, ajoutez des dégradés, c’est à vous de jouer sous cette vidéo comme d’habitude, vous trouverez le code source en téléchargement et si vous avez des questions posez-les également ce cours vidéo, l’équipe développement facile vous répondra et moi je vous propose de mz retrouver dès maintenant dans la deuxième vidéo, vous avez un lien, une image cliquez ici pour lancer la deuxième vidéo, dans la deuxième vidéo vous allez découvrir des stratégies avancées de développement, des Framework, tous ce qui va vous permettre de créer deux à trois fois plus rapidement des applications sur les mobiles, qui soient compatibles avec tous les navigateurs, qui soient compatibles avec les Smartphones, les tablettes, les ordinateurs de bureau donc tout ça c’est dans la deuxième vidéo je vous explique tout ça vous pouvez même me poser toutes vos questions, je vous réponds avec des exemples de code source donc c’est dans la deuxième vidéo, cliquez simplement sur l’image, sur le lien qui se trouve ici, moi je vous retrouve tout de suite dans la deuxième vidéo pour tout vous expliquer, tout vous détailler donc à tout de suite.

[/ppmtoggle] [/ppmaccordion]

Télécharger l’exemple de la vidéo

Retrouvez le code source commenté de l’exemple vu dans la vidéo

Téléchargement du code source JavaScript Canvas Dégradé

Cliquez ici pour télécharger le code source JavaScript Canvas Dégradé

Posez vos questions sur l’API JavaScript Canvas

Utilisez la zone commentaire pour poser vos questions sur l’API JavaScript Canvas

EXCLUSIF : Les 7 Secrets Révélés de JavaScript pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : La formation « JavaScript Facile » OFFERTE pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : Créez VOS Applications JavaScript — en moins de 7 jours grâce à notre formation OFFERTE « JavaScript Facile »

Que diriez-vous de Développer des Applications JavaScript Performantes — dès la semaine prochaine ?

TÉLÉCHARGEZ : Les codes sources du livre « JavaScript Facile » pour Créer VOS Applications — dès la semaine prochaine !

Cliquez ici pour tout recevoir >>