Tutoriel HTML5: la balise Canvas dessine des graphiques de gradient de gradient linéaire

Introduction de l'article de wulin.com (www.vevb.com): L'application de la balise du canevas de formation quotidienne HTML5 - Dessin graphiques de gradient linéaire.

Jusqu'à présent, la connaissance de base des graphiques de dessin à l'aide de toile a été introduite. À partir de cette section, nous présenterons l'une des autres connaissances de dessin les plus avancées - le gradient linéaire. Tout d'abord, passons en revue le style de remplissage de couleurs spécifié dans "HTML5 Daily Practice: Application of Canvas Tags - Drawing Rectangles". Lors du dessin d'un gradient linéaire, nous devons utiliser un nouvel objet - l'objet linéaire et utiliser la méthode CreateLineargradIed de l'objet de contexte graphique pour créer l'objet. La définition de cette méthode est la suivante:

context.CreateLlineargradient (XStart, Ystart, Xend, Yend);

Xstart: l'axe horizontal du point de départ du gradient

Ystart: la coordonnée verticale du point de départ du gradient

Xend: axe horizontal de point final de gradient

Yend: la coordonnée verticale du point final du gradient

En utilisant cette méthode, un objet linéaire à l'aide de deux points de coordonnées est créé. Alors, comment la couleur du dégradé devrait être définie?

Après avoir réussi l'objet linéaire, nous utilisons la méthode AddColOrStop pour le définir. L'exemple de cette méthode est le suivant:

context.addcolorstop (offset, couleur);

Utilisez cette méthode pour ajouter la couleur du gradient, qui a deux paramètres:

Offset: est le décalage du numéro de point flottant entre 0-1 de la couleur quittant le point de départ du gradient, qui définit la couleur au décalage du point de départ du dégradé.

Couleur: la couleur est-elle utilisée pour définir le dessin

Illustration du paramètre de décalage dans la méthode AddColOrStop