Commentaire: Nous pouvons utiliser "Path" pour dessiner n'importe quel graphique. Le chemin est simplement une série de points et les lignes reliant ces points. Tout contexte de toile n'aura qu'un seul "chemin actuel", et quand context.save () est appelé, le "chemin actuel" ne sera pas enregistré
original:? P = 371
Cet article est traduit à partir du toile de Steve Fulton & Jeff Fulton HTML5, chapitre 2, en utilisant des chemins pour créer des lignes
Pour le canevas HTML5, nous pouvons utiliser des chemins pour dessiner n'importe quel graphique. Le chemin est simplement une série de points et les lignes reliant ces points. Tout contexte de canevas n'aura qu'un seul chemin actuel, et lorsque le contexte.save () est appelé, le chemin actuel ne sera pas enregistré.
Le début et la fin du chemin
Appeler BeginPath () peut démarrer un chemin, tandis que l'appel RostEpath () mettra fin au chemin. Si vous connectez un point dans le chemin, cette connexion forme un sous-chemin. Si le dernier point du sous-chemin est connecté à son premier point, nous considérons que le sous-chemin est fermé.
Tirage au sort
L'opération de chemin la plus élémentaire se compose d'appels répétés aux commandes moveto () et lineto (). Par exemple, l'exemple suivant:
fonction drawscreen () {
context.strokestyle = "noir";
context.linewidth = 10;
context.lineCap = 'Square';
context.beginPath ();
context.moveto (20, 0);
context.lineto (100, 0);
context.stroke ();
context.closepath ();
}
Dans l'exemple ci-dessus, nous décrivons un segment de ligne horizontal avec une largeur de 10 pixels; Dans le même temps, nous avons également défini les propriétés de linecap et de strokestyle. Voici une liste de certaines propriétés couramment utilisées:
linecap
LineCap définit le style aux deux extrémités du segment de la ligne en toile et peut être réglé sur l'une des trois valeurs suivantes:
bout. Valeur par défaut; Ajoutez des bords droits aux deux extrémités du segment de ligne.
rond. Ajoutez un capuchon de ligne semi-circulaire à chaque extrémité du segment de la ligne. Le diamètre du capuchon de ligne est égal à la largeur du segment de ligne.
carré. Ajoutez des bouchons de ligne carrée aux deux extrémités du segment de la ligne. La longueur du capuchon de ligne est égale à la largeur du segment de ligne.
liner
Linejoin définit le motif d'angle à l'intersection de deux segments de ligne. Voici trois valeurs facultatives:
mitre. Défaut; crée un coin vif. Vous pouvez limiter la longueur des angles nets en définissant la propriété MiterLimit - la timidité est le rapport maximum de la longueur d'angle et de la largeur de la ligne nette, et la valeur par défaut est 10.
biseau. Créez un biseau.
rond. Créez un coin arrondi.
largeur de ligne
Linewidth définit l'épaisseur de la ligne et la valeur par défaut est 1,0.
strokestyle
Strokestyle définit les styles tels que les couleurs utilisées pour rendre les lignes.
Remarque du traducteur: Lorsque la ligne de ligne est réglée sur mitre, mais la longueur de coin tranchante dépasse la limite de mitrelimit, la toile affichera l'effet de coin biseau.