Cet article introduit principalement 24 Résumé des connaissances de base de la toile, qui est très complet et détaillé, et est recommandé à tout le monde.
Résumez maintenant les points de connaissance de la toile comme suit afin qu'ils puissent être lus à tout moment.
1. Remplissez le rectangle Fillrect (x, y, largeur, hauteur); 2. Dessinez le rectangle de la frontière starect (x, y, largeur, hauteur); 3. Effacer le clearrect rectangulaire (x, y, largeur, hauteur); 4. Fillstyle = rouge; Le style peut être couleur, dégradé et image. 5. Strokyseyle = rouge; 6. La largeur de la ligne de ligne de trait de ligne = 4; 7. La forme de l'extrémité de la ligne LineCap = Butt; Butt (amarrage) / rond (cercle) / carré (carré), par défaut, il s'agit de Butt; 8. Ligne Intersection Style Linejoin = mitre; mitre (coin tranchant) / rond (coin rond) / biseau (coin biseau), coin tranchant par défaut; 9. Commencez à dessiner le chemin BeginPath (); 10. terminer le chemin ClosePath (); Après avoir créé le chemin, si vous souhaitez dessiner une ligne connectée au point de départ du chemin, vous pouvez appeler RostEpath (); 11. Draw arc arc (x, y, rayon, startangle, endangle, vrai / false); 12. Dessiner Arc Arcto (x1, y1, x2, y2, rayon) commence à dessiner un arc d'un jour par rapport au point précédent, jusqu'à x2, y2, et passer à travers x1, y1 avec le rayon donné; 13. MoveTo (x, y); déplacer le curseur de dessin vers (x, y), sans des lignes de dessin 14. Lineto (x, y); tracer une ligne droite du point précédent 15. Courbe de Bezier quadratique: QuadraticCurveto (Cx, Cy, X, Y); Commencez à dessiner la courbe quadratique à partir du point précédent, jusqu'à ce que X, Y, CX, Cy sert de point de contrôle. 16. Courbe de Bezier cubique : Beziercurveto (Cx1, Cy1, Cx2, Cy2, X, Y); Commencez à dessiner la courbe quadratique à partir du point précédent, jusqu'à ce que X, Y, CX1, CY1 et CX2, Cy2 soient utilisés comme points de contrôle. 17. RECT (x, y, largeur, hauteur); Commencez à partir des points X, Y, et la largeur et la hauteur sont spécifiées respectivement par largeur et hauteur. Cette méthode attire un chemin rectangulaire, pas une forme distincte. 18. Tire du texte:(1) Texte de remplissage: FillText (Bonjour, x, y, largeur); la largeur est la largeur de pixel maximale facultative. Si le texte est supérieur à la largeur maximale, le texte rétrécira pour s'adapter à la largeur maximale.
(2) trait de texte: stroketext (bonjour, x, y, largeur); la largeur est la largeur de pixel maximale facultative.
(3) Style de texte: Font = Bold 14px Arial;
(4) Alignement du texte horizontal: textalign = 'start'; // start, fin, gauche, droite, centre. Valeur par défaut: Démarrez. Alignez l'axe vertical avec le point de départ (x, y) du texte comme point de base.
(5) Alignement du texte vertical: textbaseline = 'alphabétique'; // haut, suspendu, milieu, alphabétique, idée idée, fond. Valeur par défaut: alphabétique. Alignez l'axe horizontal avec le point de départ (x, y) du texte comme point de base.
(6) Largeur du texte: var text = bonjour; var longueur = context.measureText (texte); Le texte du paramètre est le texte qui doit être dessiné
19. Changement
(1) Tourner (angle): tourner l'angle radian de l'image autour de l'origine.
Vous pouvez également utiliser la transformation (math.cos (angle * math.pi / 180), math.sin (angle * math.pi / 180), - math.sin (angle * math.pi / 180), math.cos (angle * math.pi / 180), 0,0);
(2) Échelle (x, y): Échec de l'image. Vous pouvez également utiliser la transformation (x, 0,0, y, 0,0);
(3) traduire (x, y): déplacer l'origine de coordonnées vers x, y. Après avoir effectué cette transformation, les coordonnées 0 et 0 deviendront le point représenté par x, y avant. Vous pouvez également utiliser la transformation (1,0,0,1, x, y);
(4) transform (<nombre>, <nombre>, <nombring>, <nombre>, <nombre>, x, y);
(5) setTransform (<nombumber>, <nom>, <nombring>, <nombre>, x, y); Réinitialisez la matrice de transformation à l'état par défaut, puis appelez transform ();
20. Combinaison graphique Copier le code