HTML5 Canvas - Un exemple d'utilisation de chemins pour dessiner des lignes_compétences du didacticiel HTML5-Tutoriel H5-php.cn

HTML5 Canvas - Un exemple d'utilisation de chemins pour dessiner des lignes_compétences du didacticiel HTML5

WBOY

Libérer： 2016-05-16 15:49:32

original

1809 Les gens l'ont consulté

Texte original :
http://www.lifelaf.com/blog/?p=371
Cet article est traduit de Steve Fulton et Jeff Fulton HTML5 Canvas, chapitre 2, « Utilisation des chemins pour créer des lignes »

Pour HTML5 Canvas, nous pouvons utiliser « chemin » pour dessiner n'importe quel graphique. Un chemin est simplement une série de points et les lignes reliant ces points. Tout contexte Canvas n'aura qu'un seul « chemin actuel », et lorsque context.save() est appelé, le « chemin actuel » ne sera pas enregistré.

Le début et la fin du chemin

Appelez beginPath() pour démarrer un chemin, et appeler closePath() terminera le chemin. Si vous connectez des points dans un chemin, la connexion forme un « sous-chemin ». Nous considérons qu'un « sous-chemin » est « fermé » si le dernier point du « sous-chemin » est connecté à son propre premier point.

Dessin de lignes

L'opération de chemin la plus basique consiste à appeler à plusieurs reprises les commandes moveTo() et lineTo(). Par exemple, l'exemple suivant :

Copiez le code

Le code est le suivant :

function drawScreen() {
context.strokeStyle = "black";
context.lineWidth = 10;
context.lineCap = 'square'; context.moveTo(20, 0);
context.lineTo(100, 0);
context.stroke();
context.closePath(); 🎜> dans l'exemple ci-dessus, nous dessinons en même temps un segment de ligne horizontale d'une largeur de 10 pixels, nous définissons également les propriétés lineCap et StrokeStyle ; Voici une liste de certains attributs couramment utilisés :

lineCap
lineCap définit le style des deux extrémités du segment de ligne dans Canvas et peut être défini sur l'une des trois valeurs suivantes :

fesses. Par défaut ; ajoute des bords droits aux deux extrémités du segment de ligne.
rond. Ajoutez un capuchon métallique semi-circulaire à chaque extrémité du segment de fil. Le diamètre du capuchon de fil est égal à la largeur du segment de fil.
carré. Ajoutez des capuchons de fil carrés aux deux extrémités du segment de fil. La longueur du côté du capuchon métallique est égale à la largeur du segment de ligne.
lineJoin
lineJoin définit le style de coin à l'intersection de deux segments de ligne. Voici trois valeurs facultatives :

miter. Par défaut ; crée un coin pointu. Vous pouvez limiter la longueur de la cuspide en définissant l'attribut miterLimit - miterLimit est la valeur maximale du rapport entre la longueur de la cuspide et la largeur de la ligne, et la valeur par défaut est 10.
biseau. Créez un biseau.
rond. Créez un coin arrondi.
lineWidth
lineWidth définit l'épaisseur de la ligne, la valeur par défaut est 1,0.

StrokeStyle
StrokeStyle définit la couleur et les autres styles utilisés pour rendre les lignes.

Note de traduction :
Lorsque lineJoin est défini sur mitre, mais que la longueur du coin pointu dépasse la limite de miterLimit, Canvas affichera l'effet de coin "biseau".