Tutoriel de dessin en toile HTML5 (4) - Chemins non clos et méthodes de remplissage de couleur de gradient

Il existe deux méthodes générales de dessin, à savoir le remplissage et les accidents vasculaires cérébraux. L'article précédent a déjà parlé des méthodes d'AVC. Cet article parlera de la méthode de remplissage des graphiques en toile.

Rempli () est très simple? Et tout comme StrokeSet représente le style de course, Fillstyle représente le style de remplissage.

CTX.FillStyle = 'Color'; Le style de remplissage par défaut est le noir opaque

Peut. Canvas se connectera directement au point de départ à partir du point final de votre chemin actuel, puis le remplira. Comme indiqué dans l'image:

Mais vous pouvez constater que le dernier paragraphe n'a aucun trait.

Je me souviens que dans notre article précédent, nous avons dessiné un carré avec 4 lignes, mais la toile n'est pas si mauvaise, et il n'y a même pas de fonction pour dessiner un rectangle directement. Vous pouvez utiliser FillRect () pour remplir directement dans un rectangle:

ctx.fillrect (x, y, largeur, hauteur);

Ici x et y se réfèrent aux coordonnées du point de départ du coin supérieur gauche du rectangle, n'oubliez pas.

En parlant de Fillrect, nous devons mentionner Strokect. Vous l'avez deviné, cela signifie de caresser directement un rectangle.

Il y a aussi FillText et Stroketext. Quant à la fonction, vous l'avez peut-être deviné. Je n'en parlerai pas ici, donc tout le monde le prévisualisera en premier.

Dans la toile, les couleurs de gradient sont également divisées en deux types, à savoir le gradient linéaire et le gradient radial, et la méthode pour les créer est également indépendante. Voyons d'abord comment créer des gradients linéaires.

Créer un gradient linéaire = CreateLineargradient - Regardez, des mots toujours très directs. Sa syntaxe est la suivante:

CreateLineargradient (x1, y1, x2, y2) a 4 paramètres! Cela semble si compliqué, mais en fait c'est assez simple, car nous avons déjà dit qu'un point dans un monde plan est déterminé par la coordonnée X et la coordonnée y. Par conséquent, x1, y1 représente les coordonnées du point de départ d'un gradient linéaire, et x2, y2 représente les coordonnées du point final.

Les avantages de cela sont évidents, et c'est pratique si nous voulons créer un dégradé linéaire oblique. Mais essayons d'abord de créer un dégradé linéaire horizontal.

var linéaire = ctx.CreateLlineargradient (100,100,200,100); Le gradient semble être créé, alors pouvons-nous le remplir? - Ce gradient est vide et n'a pas de couleur.

La méthode pour ajouter de la couleur à la barre de gradient est addColOrStop (position, couleur). Mais sachez que cet addColorstop n'est pas ajouté à la brosse, mais à la variable qui sauve le gradient à l'avant. Je suis linéaire ici.

var linéaire = ctx.CreateLlineargradient (100,100,200,100);

linear.addColOrStop (0, '# fff');

linéaire.addcolorstop (0,5, '# f0f');

linéaire.addcolorstop (1, '# 333');

J'ai utilisé 3 addColorstops ici, ce qui signifie ajouter 3 couleurs à la barre de dégradé.

À l'heure actuelle, nous pouvons remplir la couleur du dégradé, mais nous devons d'abord attribuer le gradient défini à Fillstyle.

var linéaire = ctx.CreateLlineargradient (100,100,200,100);

linear.addColOrStop (0, '# fff');

linéaire.addcolorstop (0,5, '# f0f');

linéaire.addcolorstop (1, '# 333');

ctx.fillStyle = linéaire; // Affecter le gradient au style de remplissage

CTX.Fillrect (100 100,100,100);

ctx.stroke ();

Notez que FillRect et Starekect tracent des chemins indépendants. Par exemple, dans le code ci-dessus, la course est appelée après Fillrect, et le rectangle simplement dessiné ne sera pas caressé. Il en va de même pour Starekect.

Après les tests, j'ai trouvé un problème très douloureux, c'est-à-dire que les coordonnées des gradients linéaires sont relatives à l'ensemble de la gamme de toiles. Par exemple, ici, mon gradient linéaire commence à 100 100. Si je dessine un rectangle à 0,0 et le remplit de ce dégradé, je constaterai qu'il n'y a pas de remplissage - car la plage de mon gradient dépasse simplement la plage du rectangle.

C'est vraiment une arnaque.

réunion. La couleur avant le point de départ est la couleur du point de départ, et la couleur après le point final est toujours la couleur du point final.

Comment terminer la couleur du point final, vous pouvez remplir une couleur d'extrémité transparente après la couleur finale. comme:

linéaire.addcolorstop (0,99, «# 333»);

linear.addcolorstop (1, «rgba (51,51,51,0)»);

Selon le plan précédent, je vais essayer de construire un autre dégradé linéaire incliné. Changez simplement les paramètres de CreateLineargradient.

var linéaire = ctx.CreateLlineargradient (100 100,200,200);

L'effet est montré dans l'image:

Essayons ensuite les gradients radiaux (gradients circulaires). Semblable à CreateLineargradient, la méthode de création de gradients radiaux est: Createradialgradient, mais leurs paramètres peuvent être très différents:

Createradialgradient (x1, y1, r1, x2, y2, r2) dans lequel x1, y1, x2, y2 représente toujours le point de départ et le point final, mais le point de départ et le point final ici sont à la fois un cercle, et x, y sont les coordonnées du centre du cercle. Par conséquent, R1 et R2 sont le rayon du cercle de point de départ et le rayon du cercle du point final, respectivement. Comme indiqué dans l'image:

Dans mon impression, il semble que le gradient radial soit un cercle, le centre du cercle est le point de départ et le rayon du cercle est le point final. Mais le gradient radial dans la toile est en fait différent. Le point de départ est un cercle et le point final est un cercle, ce qui est différent de ma compréhension.

Commençons par les plus simples. Tout d'abord, faites un gradient radial très régulier, c'est-à-dire que le centre du cercle de gradient est le point de départ du gradient. En raison du gradient radial régulier, le centre est le centre du cercle, nous devrions essayer d'éviter les biais. Alors, chevauchons le centre du cercle d'extrémité avec le centre du cercle de départ?

var radial = ctx.creareadialgradient (55,55,10,55,55,55); // Coordonnées centrales correspondantes

radial.addColOrStop (0, «# fff»);

radial.addcolorstop (0,5, «# ff0»);

radial.addcolorstop (0,9, «# 555»);

radial.addColOrStop (1, «# f00»);

Le cercle de point de départ du gradient radial et les coordonnées centrales du cercle de fin que je définissent ici sont les mêmes, tandis que le rayon du cercle de point de départ est de 10 et le rayon du cercle de point de fin est de 55. La dernière plage de gradient radial dessinée est un cercle avec une largeur et une hauteur de 110, indiquant que la plage de dégradé est basée sur la plage du cercle du point de fin.

(Vous pouvez voir qu'il y a encore une couleur à l'extérieur de la gamme du cercle d'extrémité, et cette couleur est la couleur finale. Cependant, si vous essayez d'utiliser Radial.AddColorstop (1.5, '# 0f0'); pour définir des couleurs en dehors de la plage de dégradé, vous recevrez toujours une erreur).

Alors, à quoi sert le rayon du cercle du point de départ? - Le centre du gradient radial normal (appelons cela le changement de cœur ...) n'est qu'un point, pas un cercle. En fait, nous avons raison. Ce cercle de points de départ est comme un point, mais il peut être relativement grand.

Faisons le rayon du cercle de départ très grand, près du rayon du cercle d'extrémité:

var radial = ctx.creareadialgradient (55,55,50,55,55,55); // très proche

Les autres couleurs restent inchangées, puis les graphiques deviennent comme ça.

En d'autres termes, la couleur de départ du gradient radial dans la toile est tirée de l'extérieur de la plage du cercle de départ, et la couleur entière du cercle de départ est la couleur de départ.

Réglez le rayon du cercle de point de départ à 0, et le changement de centre de gradient radial est vraiment un point.

La plupart du temps, nous n'avons pas besoin d'un gradient radial très formel, mais espérons plutôt que son changement de cœur est compensé, similaire à la figure ci-dessous:

À l'heure actuelle, l'avantage des deux cercles du gradient radial de toile sort. Tant que le centre du cercle de point de départ et le cercle du point final ne se chevauchent pas, le changement de cœur se déplacera également:

var radial = ctx.createradialgradient (75,75,0,55,55,55); Mais la plage de gradient à ce moment est toujours la plage du cercle d'extrémité.

Beaucoup de gens naissent avec une mentalité de destruction. Par exemple, ici, le rayon du cercle d'extrémité est toujours plus grand que le cercle de départ, mais que se passe-t-il s'ils sont inversés?

var radial = ctx.createradialgradient (75,75,55,55,55,0);

Après les tests, il n'y aura pas d'erreurs, mais le gradient d'origine de l'intérieur vers l'extérieur s'est transformé en dégradé de l'extérieur vers l'intérieur. C'est un bon moyen de l'utiliser.

Il y a un autre problème. Si nous décalons le centre du cercle de départ et que la plage du cercle de départ dépasse la plage du cercle d'extrémité,

Que se passe-t-il à ce moment?

Ah! ? Quelle est la situation? !

Cette situation se produit lorsque le cercle de départ et le cercle d'extrémité ne se chevauchent que partiellement. Donc, si vous avez besoin de gradients radiaux normaux, assurez-vous que l'un des cercles enferme complètement l'autre.

De plus, comme le gradient peut être affecté à Fillstyle, il peut également être affecté à StrokeSetyle. Vous connaissez l'effet.