Cet article présente principalement le guide pour l'utilisation de la méthode Canvas de HTML5. C'est très simple et clair. C'est un très bon article. Je vous le recommande ici.
Méthode de toile
Save () enregistre l'état de l'environnement actuel
restaurer () renvoie l'état du chemin et les propriétés qui ont été enregistrées avant
createEvent ()
getContext () Renvoie un objet indiquant l'API nécessaire pour accéder à la fonction de dessin
todataupl () renvoie l'URL de l'image de toile
Propriétés et méthodes de styles de ligne
propriété:
LineCap définit ou renvoie le style de point de terminaison de la ligne
linejoin définit ou renvoie le type de coin créé lorsque deux lignes se croisent.
LineWidth définit ou renvoie la largeur de la ligne actuelle.
miterLimit définit ou renvoie la longueur de mitre maximale
Propriétés et méthodes de couleur, de style et d'ombre
propriété
Fillstyle décolle ou renvoie la couleur, le gradient ou le mode utilisés pour remplir la peinture
Strokestyle Set ou retournez la couleur, le gradient ou le mode utilisé pour les coups
ShadowColor définit ou renvoie la couleur utilisée pour l'ombre
ShadowBlur définit ou renvoie le niveau de flou utilisé pour les ombres
ShadowOffsetx définit ou renvoie la distance horizontale de l'ombre à la forme
ShadowOffSety définit ou renvoie la distance verticale de l'ombre à la forme
méthode
CreateLineargradIent () crée un gradient linéaire (utilisé sur le contenu en toile)
createPattern () répète l'élément spécifié dans la direction spécifiée
Createradialgradient () crée des gradients radiaux / anneaux (utilisés sur le contenu en toile)
addColOrSop () spécifie la position de couleur ou d'arrêt dans l'objet gradient
Méthode de chemin
rempli () remplit le dessin actuel (chemin)
Stroke () dessine le chemin défini
BeginPath () démarre un chemin ou réinitialise le chemin actuel
MoveTo () déplace le chemin vers le point spécifié de la toile sans créer de lignes
ClosePath () crée un chemin du point actuel au point de départ
lineto () ajoute un nouveau point pour créer une ligne de ce point au dernier point spécifié
Clip () coupe une zone de toute forme et taille de la toile d'origine
quadraticcurveto () crée la deuxième courbe de Bezier
BezierCureto () crée la dernière courbe de Bezier
arc () crée un arc / courbe (utilisé pour créer des cercles ou des cercles partiels)
arcto () crée un arc / courbe entre deux tangentes
IsPointInPath () renvoie une valeur booléenne si le point spécifié est dans le chemin actuel
rectangle
Rect () crée un rectangle
fillrect () dessine le rectangle rempli
starekect () dessine un rectangle (pas de remplissage)
ClearRect () efface les pixels spécifiés dans le rectangle donné
Définir les propriétés et les méthodes du texte
propriété:
la police définit ou renvoie les propriétés de police actuelles du contenu texte
Textalign set ou renvoie l'alignement actuel du contenu texte
Le paramètre TextBaseline renvoie la ligne de base de texte actuelle utilisée lors du dessin de texte.
méthode:
fillText () tire du texte rempli sur la toile
stroketext () tire du texte sur toile (pas de remplissage)
mesureText () renvoie un objet contenant la largeur de texte spécifiée
Méthode de conversion
Scale () évolue le tracé actuel à plus grand ou plus petit
rotation () tourne le dessin de courant
traduire () remaps la position (0,0) de la chemise florale
transform () remplace la matrice de transformation de courant du dessin
SetTransform () réinitialise la conversion actuelle en matrice d'unité. Puis exécutez transform ()