Avec couleurs et dégradés avec le tag de toile HTML5 - nuls

Presque toutes les opérations de la fonction de canevas HTML5 implémentent un style de remplissage ou de trait. Pour tirer le meilleur parti de la toile, vous devez comprendre comment ils fonctionnent. Les trois principaux types de styles que vous pouvez utiliser pour les remplissages et les traits sont les couleurs, les dégradés et les motifs.

Application de couleurs avec la balise canvas HTML5

Pour spécifier une couleur de remplissage ou de trait dans la balise canvas, vous pouvez utiliser les mêmes outils de couleur que vous utilisez en CSS et HTML:

Valeurs hexadécimales à six chiffres: Le schéma hexadécimal à six chiffres généralement utilisé en CSS utilise deux chiffres pour le rouge, le vert et le bleu. La valeur commence par un signe dièse. Par exemple, # FF0000 est rouge et # FFFF00 est jaune.
Valeurs hexadécimales à trois chiffres: Les valeurs de couleur hexadécimale utilisent souvent des valeurs répétées. Vous pouvez donc les abréger en nombres à trois chiffres. Dans ce schéma, le rouge est # F00 et le jaune est # FF0.
Noms de couleur: Vous pouvez souvent utiliser des noms de couleur, comme "rouge" ou "jaune". "Les noms de couleurs courants fonctionnent généralement, mais tous les navigateurs ne prennent pas en charge la même liste de noms de couleurs; "Papaye fouet" ne sera probablement pas pris en charge.
Valeurs RVB et RVBA: Vous pouvez utiliser la fonction rgb () pour créer des couleurs en utilisant des entiers (0-255) ou des pourcentages (0% -100%). Rouge est rgb (255, 0, 0) et jaune est rgb (100%, 100%, 0%). Notez que la fonction rgb doit aller entre guillemets comme n'importe quelle autre valeur de couleur. Si vous voulez inclure alpha, ajoutez un quatrième paramètre, qui est une valeur zéro-un. Rouge transparent serait rgba (255, 0, 0, 0. 5).
HSL et HSLA: Les nouveaux formats de couleurs hsl et hsla sont censés être supportés par l'élément canvas, mais jusqu'à présent, la prise en charge de ces fonctionnalités varie selon le navigateur.

Notez que les différentes valeurs d'une couleur sont toujours entourées de guillemets. Le paramètre color est une chaîne pouvant être interprétée comme une couleur CSS.

Application de dégradés avec la balise canvas HTML5

Vous pouvez également remplir une forme avec un dégradé. Les dégradés de canevas sont définis en deux étapes:

Créer un objet dégradé. Il existe deux méthodes intégrées dans l'objet de contexte pour cela. L'un construit des gradients linéaires, et l'autre construit des gradients radiaux.
Ajouter des arrêts de couleur. Un arrêt de couleur est un élément spécial qui indique une couleur à ajouter au dégradé. Vous pouvez ajouter autant de couleurs que vous le souhaitez, et vous pouvez également spécifier où le long du motif de dégradé la couleur apparaîtra. Le code suivant génère un dégradé radial et un dégradé linéaire sur un canevas:

function draw () {var drawing = document. getElementById ("dessin"); var con = dessin.getContext ("2d"); // construit un gradient linéaire lGrad = con. createLinearGradient (0, 0, 100, 200); lGrad. addColorStop (0, "# FF0000"); lGrad. addColorStop (. 5, "# 00FF00"); lGrad. addColorStop (1, "# 0000FF"); con. fillStyle = lGrad; con. fillRect (0, 0, 100, 200); // construit un gradient radial rGrad = con. createRadialGradient (150, 100, 0, 150, 100, 100); rGrad. addColorStop (0, "# FF0000"); rGrad. addColorStop (. 5, "# 00FF00"); rGrad. addColorStop (1, "# 0000FF"); con. fillStyle = rGrad; con. fillRect (100, 0, 200, 200);} // end draw

La sortie de ce code est montrée ici:

Un dégradé

linear est un motif de couleurs qui se fondent l'un dans l'autre le long d'un chemin en ligne droite. Pour définir un dégradé linéaire, procédez comme suit: Créez une variable pour conserver le dégradé.

Les dégradés sont un peu plus complexes que les couleurs simples, ils sont donc stockés dans des variables à réutiliser.

Générez le dégradé en utilisant la méthode createLinearGradient () de l'objet de contexte pour créer un dégradé linéaire.
Définissez le chemin du dégradé avec la méthode createLinearGradient ().
Il attend quatre paramètres définissant une ligne (x1, y1, x2, y2). Les couleurs seront perpendiculaires à cette ligne, donc si vous voulez des bandes de couleurs horizontales, tracez une ligne verticale. Si vous voulez des bandes de couleurs verticales, tracez une ligne horizontale. La ligne occupe généralement toute la largeur ou la hauteur de l'élément, mais ce n'est pas obligatoire. Si la ligne est plus petite que l'image, la zone en excès sera automatiquement affectée à la couleur de l'extrémité la plus proche du dégradé.

Ajouter des arrêts de couleur.
Les dégradés ne sont pas très amusants sans couleurs. La méthode addColorStop () de l'objet dégradé vous permet d'ajouter une couleur au dégradé. Chaque arrêt de couleur a deux paramètres: la position et la couleur. La position est une valeur 0-1 indiquant où sur la ligne de dégradé la couleur doit être positionnée. 0 est le début, 1 est la fin, et les valeurs intermédiaires sont au milieu. Le paramètre color est une valeur de texte pouvant être évaluée en tant que couleur CSS. Au minimum, vous devez définir deux arrêts de couleur, un pour le début et un pour la fin.

Appliquez le dégradé en tant que motif de remplissage.
Si vous souhaitez utiliser le dégradé en tant que motif de remplissage, définissez fillStyle du contexte sur la variable de dégradé que vous venez de créer. Toutes les remplissages suivants seront effectués en utilisant le motif de dégradé (jusqu'à ce que fillStyle soit changé en quelque chose d'autre).

Les dégradés radiaux sont similaires. Plutôt que de dessiner un dégradé en ligne droite, ils dessinent une série de bandes de couleurs circulaires. La première couleur est le centre du cercle et la dernière couleur définit un rayon externe. Construire un gradient radial est très similaire à la construction d'un gradient linéaire. La seule différence est la commande create.

Utilisez la méthode createRadialGradient () de l'objet console pour créer un dégradé radial. Cette commande prend en réalité six paramètres:

beginX

: La position X du point de départ. Ceci est souvent au centre de votre forme. beginY
: Avec beginX, cela détermine la position de départ de votre dégradé. beginRadius
: Le rayon de votre cercle central. Habituellement, c'est zéro, mais vous pouvez le rendre plus grand si vous voulez accentuer la couleur du centre plus. endX
: Décrit la position X du cercle de fin. Typiquement, c'est la même chose que beginX. endY
: Avec endX, définit la position du cercle de fin. Si les cercles de début et de fin ont les mêmes positions, vous obtiendrez un dégradé circulaire. Changez la position de fin pour que le dégradé s'étende dans une direction particulière. endRadius
: Le rayon de fin définit l'emplacement du dernier dégradé de couleurs. Des valeurs plus petites pour ce rayon conduiront à un gradient étroitement groupé, et de plus grandes valeurs étendront le gradient le long d'une plus grande zone. Une fois le dégradé défini, la méthode addColorStops () fonctionne exactement comme pour les dégradés linéaires. La variable créée via la commande addRadialGradient () est généralement stockée dans une variable, où elle peut être utilisée pour les requêtes fillStyle () suivantes.