Pour plus de détails, Résumé de l'API commun HTML5 Canvas (2) - API de délai

Canvas peut dessiner de nombreux styles et de beaux effets.

Lors de la peinture, la toile équivaut à des tissus et le contexte équivaut aux pinceaux.

MOVETO (X0, Y0): déplacez la brosse actuelle (ICTX) à cette position (x0, y0).

Lineto (x1, y1): tracez une ligne droite de la position actuelle (x0, y0) à (x1, y1).

BeginPath (): ouvrez un chemin ou réinitialisez le chemin actuel.

ClosePath (): Retour au point de départ du chemin du point actuel, c'est-à-dire la position du début de début, d'évitement et de chemin.

stroke (): dessiner. Cette fonction doit être ajoutée pour dessiner des images, donc cela doit être placé à la fin.

 var iCanvas = document.getElementById (ICANVAS); (); Ictx.stroke ();

Effet:

Notez ici que si ClosePath est placé derrière la fonction de course, il ne sera pas entraîné en ligne fermée, car elle est tirée avant la fermeture, de sorte que la ligne droite sur la gauche ne sera pas dessinée.

LINECAP: style de point de terminaison de ligne, Butt, Rand, Square.

Linejoin: le style de point de tournant lorsque les deux lignes se croisent.

Miterlimet: Si la longueur du sédiment dépasse la valeur de la mitrelimit, le coin sera affiché dans le type de biseau de ligne.

LINEWIDTH: Largeur de ligne

StrokeSet: Couleur de ligne, gradient (objet de gradient défini), mode. context.strokesty = # 333;

 var iCanvas = document.getElementyId (ICANVAS); , 10); ictx.lineto (80,80); Black Diagonal Again, un total de 3 lignes. Ictx.strokestyle = # 000000;

Beginath et Closepath ne peuvent pas apparaître par paires.

Arc (x, y, rayon, startangle, endangle, dans le sens antihoraire): dessiner la courbe, le rayon est un rayon de courbe, un startangle, un angle de départ et un angle de fin, avec l'arc (math.pi / 180) * Valeur d'angle, Anticlockw ISE Dessin Direction Direction Articles

Arcto (x1, y1, x2, y2, rayon): dessinez la courbe avant les deux lignes coupées.

 Ictx.beginpath (); ictx.moveto (20,20); / Créer des arcs ictx.lineto (150,120);

Dessinez la connexion du point de départ et du point final horizontal de la ligne horizontale au point final du réglage de la ligne horizontale.

Quadraticcurveto (x1, y1, x2, y2): deux courbes de bessel. (X1, y1) Les coordonnées du point de contrôle, (x2, y2) les coordonnées du point final

Beziercurveto (x1, y1, x2, y2, x, y): trois courbes de Bessel. (X1, y1) Les coordonnées du point de contrôle 1, (x2, y2) Point de contrôle 2 coordonnées (x, y) Pnoues finales.

La courbe de Bessel est très utile lors du dessin de courbes très lisses.

Rect (): créer un rectangle;

Filect (x, y, largeur, hauteur): dessinez le rectangle rempli: (x, y) point de départ, largeur, hauteur de hauteur de hauteur de hauteur de hauteur de hauteur de hauteur de hauteur

starekect (): dessiner un cadre filaire rectangulaire

ClearRect (): effacer le rectangle.

 ICTX.FILLSTYLE = # 0000FF;

FILLSTYLE: Réglez la couleur, le gradient ou le motif (Patten);

Strokestyle: couleur, gradient ou motif de pinceau

ShadowColor: Shadow Yanse

ShadowBlur: niveau flou

Shadowoffsetx: distance horizontale de l'ombre

ShadowOffsety: Distance verticale de l'ombre

 Ictx.shadowblur = 20;

CreateLineargradient (x1, y1, x2, y2): dessiner le gradient linéaire, (x1, y1) est le point de départ du gradient (x2, y2) est le point final du gradient.

Createradialgradient (x1, y1, r1, x2, y2, r2): gradient radial: (x1, y1) est le point de départ du gradient, R1 est le rayon, (x2, y2) est le point final du gradient, R2 est le rayon du point final;

Les deux notes doivent être utilisées

AddColorsStOP (stop, couleur) est défini pour définir le processus de gradient, et la valeur est de 0,0 à 1,0.

 var grd = ictx.CreateLelinearaDIENT (0,0,170,0); // Le gradient est un objet, qui est utilisé pour passer la valeur à FillStyle. (200 150 150,100);

CreatePattern (image, répéter | répéter-x | répéter-y | sans répétition): l'image est un objet d'image, et les paramètres suivants sont utilisés pour définir la méthode répétitive de l'image.

rempli (): Remplissez le chemin actuel.

ispointInPath (): ictx.ispointinPath (x, y);

Retirez la toile: obtenez la largeur et la hauteur de la toile, iCanvas.Height, iCanvas.width; puis utilisez ClearRect ();

Modifiez la largeur de la toile: iCanvas.width = '200'; icanvas.width = '300'.

GlobalPha: Définissez la transparence, seulement 0 ~ 1 nombre.

Todataurl: iCanvas.todataurl (type, encderOptions), cette fonction renvoie un URI d'une image64 dans l'image, les paramètres sont disponibles, le type peut définir des types d'images tels que l'image / jpeg, l'image / webp, la valeur par défaut est l'image / p de la par-defaire ng; est un numéro 0 ~ 1 est utilisé pour définir la qualité d'image de l'image / JPEG, de l'image / webp, et le type dans d'autres formats définir ce paramètre n'est pas valide.

Clip (): la toile de toute forme et taille de la toile, puis tous les dessins seront limités à la zone de couture. Cette méthode est généralement utilisée avec des chemins tels que des formes rond rectangulaires.

 ICTX.Arc (100,100,50, (Math.Pi / 180) *, (Math.Pi / 180) * 360, True); ;.

Si vous souhaitez toujours faire fonctionner le canevas externe, utilisez la fonction SAVE () pour enregistrer avant de couper et utilisez la fonction Restore () pour restaurer l'état précédemment enregistré après la coupe, mais l'opération au milieu ne disparaîtra pas.

Ce qui précède est tout le contenu de cet article.