Guide d'utilisation de la méthode de canevas HTML5_compétences du didacticiel HTML5

Méthode Canvas

save() enregistre l'état de l'environnement actuel

restaurer() renvoie l'état et les attributs du chemin précédemment enregistrés

créerEvent()

getContext() renvoie un objet indiquant l'API nécessaire pour accéder à la fonction de dessin

toDataUPL() renvoie l'URL de l'image du canevas

Propriétés et méthodes des styles de ligne

Attribut :

lineCap définit ou renvoie le style du point final 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 maximale de l'onglet

Propriétés et méthodes de couleur, de style et d'ombre

Attributs

fillStyle définit ou renvoie la couleur, le dégradé ou le motif utilisé pour remplir le tableau

StrokeStyle définit ou renvoie la couleur, le dégradé ou le motif utilisé pour les traits

shadowColor définit ou renvoie la couleur utilisée pour les ombres

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 dégradé linéaire (utilisé sur le contenu du canevas)

createPattern() répète l'élément spécifié dans la direction spécifiée

createRadialGradient() crée un dégradé radial/circulaire (utilisé sur le contenu du canevas)

addColorStop() spécifie la couleur ou la position d'arrêt dans l'objet dégradé

Méthode du chemin

fill() remplit le dessin actuel (chemin)

Stroke() dessine un chemin défini

beginPath() démarre un chemin ou réinitialise le chemin actuel

moveTo() déplace le chemin vers le point spécifié dans le canevas sans créer de ligne

closePath() crée un chemin depuis le point actuel jusqu'au point de départ

lineTo() ajoute un nouveau point et crée une ligne de ce point au dernier point spécifié

clip() coupe une zone de n'importe quelle forme et taille de la toile d'origine

quadraticCurveTo() crée une deuxième courbe de Bézier

bezierCureTo() crée une courbe de Bézier sous-carrée

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 situé dans le chemin actuel

Rectangle

Rect() crée un rectangle

fillRect() dessine un rectangle "rempli"

StrokeRect() 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

Attributs :

police Définit ou renvoie l'attribut de police actuel du contenu du texte

textAlign définit ou renvoie l'alignement actuel du contenu du texte

Le paramètre textBaseline renvoie la ligne de base du texte actuelle utilisée lors du dessin du texte.

Méthode :

fillText() dessine du texte "rempli" sur le canevas

StrokeText() dessine du texte sur le canevas (pas de remplissage)

measureText() renvoie un objet contenant la largeur de texte spécifiée

Méthode de conversion

scale() redimensionne le dessin actuel à une taille plus grande ou plus petite

rotate() fait pivoter le dessin actuel

translate() remappe la position (0,0) de la chemise fleurie

transform() remplace la matrice de transformation actuelle du dessin

setTransform() réinitialise la transformation actuelle sur la matrice d'identité. Ensuite, exécutez transform()

.