Le deuxième cas d’utilisation de fillStyle est le remplissage en dégradé. Les couleurs de dégradé sont divisées en couleurs de dégradé linéaire et en couleurs de dégradé radial.
Dégradé linéaire : grossièrement divisé en deux étapes Deux nouvelles fonctions du canevas seront utilisées ici.
Étape 1 : utilisez une nouvelle fonction createLinearGradient(xstart,ystart,xend,yend);var LinearGrad = context.createLinearGradient(xstart,ystart,xend,yend);
Il comporte quatre paramètres. Il s'agit respectivement de xstart, ystart, xend et yend, qui forment deux coordonnées, et ces deux coordonnées forment un segment de ligne. Ce segment de ligne est en réalité une ligne de dégradé. Les lignes de dégradé sont utilisées pour définir la direction et l'échelle du dégradé.
La deuxième étape : ajouter colorStop en fonction de cette ligne de dégradé. Cette méthode est appelée addColorStop(stop, color). Il a deux paramètres : stop et couleur. Le premier paramètre est une valeur à virgule flottante utilisée pour déterminer la position de la couleur clé. Le deuxième paramètre est utilisé pour déterminer la couleur de la couleur clé. LinearGrad.addColorStop(stop,couleur);
Après avoir terminé ces deux étapes, la variable LinearGrad peut être transmise dans cet attribut en tant que fillStyle.
Regardez le code :
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA -Compatible content=ie=edge> <title>Dégradé linéaire</title></head><body> <canvas id=canvas style=border : 1px solid #aaa;display:block;margin:0 auto></canvas></body></html><script> window.onload = function () { var canvas = document.getElementById(canvas.width = 800); ; canvas.height = 600; if (canvas.getContext(2d)) { var context = canvas.getContext(2d); //Obtenir l'environnement de dessin contextuel var LinearGrad = context.createLinearGradient(0, 0, 800, 600); //La coordonnée de départ de la ligne de dégradé est (0,0) et la coordonnée de fin est (800,600) LinearGrad.addColorStop(0.0, '#000'); Le premier Le paramètre représente la position de la couleur de la clé. 0 représente la position de départ, 1 représente la position de fin et le deuxième paramètre représente la couleur de la couleur de la clé. LinearGrad.addColorStop(1.0, '#fff'); context.fillStyle = LinearGrad; context.fillRect(0, 0, 800, 600); else { alert('Votre navigateur ne prend pas en charge Canvas, veuillez essayer de changer de navigateur ~ ') } ></script>Rendu :
Après avoir créé la variable LinearGrad, nous pouvons ajouterColorStop et en ajouter plusieurs.
Par exemple:
Code:
var LinearGrad = context.createLinearGradient(0, 0, 800, 600); //La coordonnée de départ de la ligne de dégradé est (0,0) et la coordonnée de fin est (800 600) LinearGrad.addColorStop(0.0, '#fff') ; LinearGrad.addColorStop(0.25, '#FB3'); '#690');
Rendu :
De plus, la ligne de dégradé que nous avons définie est inclinée et nous pouvons également la définir comme horizontale ou verticale. Il suffit de modifier les coordonnées de fin de la ligne de dégradé. Regardez le code pour faire un dégradé horizontal :
var LinearGrad = context.createLinearGradient(0, 0, 800, 0);
Rendu :
Couleur du dégradé vertical :
var LinearGrad = context.createLinearGradient(0, 0, 800, 0);
Rendu :
Peu importe qu'elle soit inclinée horizontalement ou verticalement, ce que nous faisons traverse toute la toile. Alors, quel sera l'effet si notre ligne de dégradé n'est affectée qu'à une partie de la toile ? Modifions-le
var LinearGrad = context.createLinearGradient(0, 0, 400, 300);
Rendu :
De la même manière, la ligne de dégradé que nous créons peut également dépasser la largeur et la hauteur maximales de cette toile. Modifions-le
var LinearGrad = context.createLinearGradient(-200, -100, 1000, 800);
Rendu :
De plus, les formes remplies que nous dessinons n’occupent pas nécessairement la totalité de la toile. Nous pouvons ajuster arbitrairement la forme que nous définissons. Cette forme remplie trouvera la couleur de remplissage appropriée sur la ligne de dégradé que nous avons définie et la remplira. Par exemple:
var LinearGrad = context.createLinearGradient(-200, -100, 1000, 800);
Rendu :
Dégradé radial : la différence avec le dégradé linéaire est que le dégradé radial définit un dégradé radial. Ce gradient radial est défini à partir de deux cercles concentriques. Contrairement à un dégradé linéaire qui est défini entre deux points.
Les dégradés radiaux nécessitent également deux étapes.
Étape 1 : Utilisez une nouvelle fonction createRadialGradient(x0,y0,r0,x1,y1,r1) ; il a 6 paramètres. Les trois premiers paramètres définissent les coordonnées et le rayon du premier anneau, et les trois derniers paramètres définissent les coordonnées et le rayon du deuxième anneau. L'ensemble du gradient radial se produit entre ces deux cercles. var radialGrad = context.createRadialGradient(x0,y0,r0,x1,y1,r1);
Étape 2 : C'est la même chose qu'un dégradé linéaire, je ne le présenterai donc pas en détail. radialGrad.addColorStop(stop,couleur);
Le code est très similaire au code des dégradés linéaires. C'est juste que createRadialGradient est utilisé ici. Nous passons les paramètres createRadialGradient(300,300,0,300,300,500). Les trois premiers paramètres définissent un point avec un rayon de 0 au centre du canevas. Les trois derniers paramètres définissent un grand cercle d'un rayon de 500 au centre de la toile. Ceci définit un gradient radial rayonnant vers l’extérieur à partir d’un point. Jetez un oeil au code
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0> <meta http-equiv=X-UA -Compatible content=ie=edge> <title>Dégradé radial</title></head><body> <canvas id=canvas style=border: 1px solid #aaa;display:block;margin:0 auto></canvas></body></html><script> window.onload = function () { var canvas = document.getElementById(canvas.width = 600); ; toile.hauteur = 600; if (canvas.getContext(2d)) { var contexte = toile.getContext(2d); contexte.createRadialGradient(300, 300, 0, 300, 300, 500); radialGrad.addColorStop(0.0, '#fff'); radialGrad.addColorStop(0.25, '#FB3'); '); radialGrad.addColorStop(0.75, '#09C'); radialGrad.addColorStop(1.0, '#000'); context.fillStyle = radialGrad; context.fillRect(0, 0, 600, 600); Votre navigateur ne prend pas en charge Canvas, veuillez essayer de changer de navigateur ~') } }</script>Rendu :
Vous pouvez essayer de modifier les paramètres pour voir quels seront les différents effets.
Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.