Tutoriel de dessin sur toile html5 (4) – Chemins non fermés et méthodes de remplissage en dégradé_Compétences du didacticiel html5

Il existe généralement deux manières de dessiner, à savoir le remplissage et le trait. L'article précédent a déjà parlé de la méthode du trait. Cet article parlera de la méthode de remplissage des graphiques dans Canvas.
Le remplissage est fill(), très simple, non ? Et tout comme StrokeStyle représente le style de trait, fillStyle représente le style de remplissage.
ctx.fillStyle = 'Color'; Le style de remplissage par défaut est noir opaque

Question : Les chemins non fermés peuvent-ils être remplis ?
Oui. Le canevas se connectera directement du point final de votre chemin actuel au point de départ, puis le remplira. Comme le montre l'image :

Mais vous constaterez que le dernier paragraphe n’est pas barré.
Rappelez-vous que dans notre article précédent nous avions dessiné un carré avec 4 lignes, mais le canevas n'est pas si mal, et il n'a même pas de fonction pour dessiner directement un rectangle. Vous pouvez utiliser fillRect() pour remplir directement un rectangle :

Copiez le code

Le code est le suivant :

ctx.fillRect(x,y,width,height);

Les x et y font ici référence aux coordonnées du point de départ du coin supérieur gauche du rectangle , souviens-toi.
Quand il s'agit de fillRect, il faut mentionner StrokeRect Vous l'aurez deviné, cela signifie tracer directement un rectangle.
Il existe également fillText et StrokeText. Quant à leurs fonctions, vous les avez peut-être devinées, je ne les détaillerai pas ici.

Couleur du dégradé de remplissage du canevas
Dans Canvas, le dégradé de couleur est également divisé en deux types, à savoir le dégradé linéaire et le dégradé radial, et les méthodes de création de ceux-ci sont également indépendantes. Voyons d'abord comment créer un dégradé linéaire.
Créer un dégradé linéaire = createLinearGradient - Vous voyez, c'est toujours un mot très simple. 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 comme nous l'avons déjà dit, un point dans le monde plat est déterminé par la coordonnée x et la coordonnée y. Par conséquent, x1 et y1 représentent les coordonnées du point de départ du dégradé linéaire, et x2 et y2 représentent les coordonnées du point final.
L'avantage de ceci est évident. C'est très pratique si l'on veut créer un dégradé linéaire diagonal. Mais essayons d'abord de créer un dégradé linéaire horizontal.
var Linear = ctx.createLinearGradient(100,100,200,100); Le dégradé semble être créé, alors pouvons-nous le remplir ? ————Ce dégradé est vide et n'a pas de couleur.
La façon d'ajouter de la couleur à la barre de dégradé est addColorStop (position, couleur). Mais veuillez noter que cet addColorStop n'est pas ajouté au pinceau, mais à la variable précédente qui contient le dégradé. Ici, je suis linéaire. >

Copier le codeLe code est le suivant :

var linéaire = ctx.createLinearGradient(100,100,200,100 );
linear.addColorStop(0,'#fff');
linear.addColorStop(0.5,'#f0f');
linear.addColorStop(1,'#333');

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

Remarque
 : Le paramètre de position de addColorStop est toujours un nombre compris entre 0 et 1, qui peut être deux décimales, indiquant un pourcentage. Il ne peut pas recevoir de paramètres comme « 3px ». À ce stade, nous pouvons remplir la couleur du dégradé, mais nous devons d'abord attribuer le dégradé défini à fillStyle

Copier le code Le code est le suivant :

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

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

linear.addColorStop); ( 0.5,'#f0f');
linear.addColorStop(1,'#333');
ctx.fillStyle = Linear; //Attribuer le dégradé au style de remplissage
ctx.fillRect(100,100,100,100 );
ctx.AVC();

Notez que fillRect et StrokeRect dessinent des chemins indépendants. Comme indiqué dans le code ci-dessus, appeler Stroke après fillRect ne tracera pas le rectangle qui vient d'être dessiné. La même chose est vraie pour StrokeRect.
Après les tests, j'ai découvert un problème très ennuyeux, c'est-à-dire que les coordonnées du dégradé linéaire sont relatives à toute la plage du Canvas. Par exemple, ici, le point de départ de mon dégradé linéaire est 100 100. Si je dessine un rectangle à 0,0 et que je le remplis avec ce dégradé, je constaterai qu'il n'y a pas de remplissage - car la plage de mon dégradé dépasse simplement le rectangle. . portée.
C'est vraiment un paramètre de triche.

Question : La couleur sera-t-elle remplie avant le point de départ du dégradé et après le point final du dégradé ?
Oui. La couleur avant le point de départ est la couleur de départ et la couleur après le point final est toujours la couleur finale.
Comment terminer la couleur de fin, vous pouvez remplir une couleur de fin transparente après la couleur de fin. Par exemple :

Copier le code

Le code est le suivant :

linear.addColorStop (0.99,' #333');
linear.addColorStop(1,'rgba(51,51,51,0)');

Selon le plan précédent, je vais construire un dégradé linéaire incliné pour essayer d'essayer. Modifiez simplement les paramètres de createLinearGradient

Copiez le code

Le code est le suivant :

var Linear = ctx.createLinearGradient(100,100,200,200);

L'effet est le suivant :

Ensuite, essayons un dégradé radial (dégradé circulaire). Semblable à createLinearGradient, la méthode de création d'un dégradé radial est : createRadialGradient, mais leurs paramètres peuvent être très différents :
createRadialGradient(x1,y1,r1,x2,y2,r2) où x1,y1,x2,y2 sont toujours le même représente le point de départ et le point final, mais le point de départ et le point final ici sont tous deux un cercle, et x, y sont les coordonnées du centre du cercle. Par conséquent, r1 et r2 sont respectivement le rayon du cercle de départ et le rayon du cercle de fin. Comme le montre l'image :

À mon avis, il semble que le dégradé 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 dégradé radial dans le canevas est en réalité 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.
On part du plus simple. Tout d’abord, créez un dégradé radial très régulier, c’est-à-dire que le centre du cercle de dégradé est le point de départ du dégradé. En raison du gradient radial régulier, le centre est le centre du cercle, nous devons donc essayer d'éviter toute déviation. Alors, faisons coïncider le centre du cercle de fin avec le centre du cercle de départ, n’est-ce pas ?

Copier le code

Le code est le suivant :

var radial = ctx.createRadialGradient (55, 55,10,55,55,55); //Coordonnées du centre du cercle coïncident
radial.addColorStop(0,'#fff');
radial.addColorStop(0.5,'#ff0');
radial.addColorStop(0.9,'#555');
radial.addColorStop(1,'#f00');

Ici, je définis les coordonnées centrales du cercle de départ du dégradé radial et du cercle de fin pour qu'elles soient identiques, et le rayon du cercle de départ est de 10 et le rayon du cercle de fin est de 55. La plage de dégradé radial finale dessinée est un cercle d'une largeur et d'une hauteur de 110. Notez que la plage de dégradé est basée sur la plage du cercle du point final.
(Vous pouvez voir qu'il y a toujours une couleur en dehors de la plage du cercle de fin. Cette couleur est la couleur de fin. Cependant, si vous essayez d'utiliser radial.addColorStop(1.5,'#0f0′); pour définir un couleur en dehors de la plage de dégradé, vous obtiendrez toujours une erreur).
Alors, à quoi sert le rayon du cercle de départ ? ——Le centre du dégradé radial normal (appelons-le « changer de centre »...) n'est qu'un point et ne doit pas être un cercle. En fait, nous avons raison. Ce cercle de départ équivaut à un point, mais il peut être plus grand.
Faisons le rayon du cercle de départ très grand, proche du rayon du cercle d'arrivée :

Copier le code

Le code est le suivant :

var radial = ctx.createRadialGradient(55,55,50,55,55,55 //très proche
Les autres colorStops restent inchangés, puis le graphique devient comme ceci.

En d'autres termes, la couleur de départ du dégradé radial dans le canevas est dessinée en dehors de la plage du cercle de départ, et toute la couleur du cercle de départ est la couleur de départ.
Nous fixons le rayon du cercle de départ à 0, et le "changement de centre" du dégradé radial est en réalité un point.
La plupart du temps, nous n'avons pas besoin d'un dégradé radial très formel, nous voulons plutôt que son centre de changement soit décalé, comme dans l'image ci-dessous :

À ce stade, l'avantage de deux cercles dans le dégradé radial du canevas ressort. Tant que les centres de notre cercle de point de départ et du cercle de fin ne coïncident pas, le centre de changement se déplacera également :
var radial = ctx. .createRadialGradient(75,75, 0,55,55,55); mais la plage de dégradé à ce moment est toujours la plage du cercle du point final.
Beaucoup de gens naissent avec une mentalité destructrice. Par exemple, ici, le rayon du cercle de fin est toujours plus grand que celui du cercle de départ, mais que se passerait-il s'ils étaient inversés ?

Copier le code

Le code est le suivant :

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

Après le test, cela ne signalera pas d'erreur, mais le dégradé d'origine de l'intérieur vers l'extérieur a été transformé en un dégradé de l'extérieur vers à l'intérieur. C'est une bonne utilisation.

Il y a un autre problème. Si nous décalons le centre du cercle de départ et que la portée du cercle de départ dépasse la portée du cercle de fin,

Que va-t-il se passer à ce moment-là ?

Ah ! ? Que se passe-t-il? !
Cela se produit lorsque le cercle du point de départ et le cercle du point final ne se chevauchent que partiellement. Donc, si vous souhaitez un dégradé radial normal, assurez-vous qu'un cercle enveloppe complètement l'autre.
De plus, puisque le dégradé peut être attribué à fillStyle, il peut également être attribué à StrokeStyle. Vous connaissez l'effet.