Troisième résumé d'apprentissage sur toile : Tracer des chemins – Segments de ligne

Certaines méthodes de dessin dans l'environnement de dessin Canvas sont des méthodes de dessin immédiates, et certaines méthodes de dessin sont basées sur un chemin.

Il n'existe que deux méthodes pour dessiner des graphiques immédiatement : StrokeRect() et fillRect() Bien que les méthodes StrokezText() et fillText() soient également dessinées immédiatement, le texte n'est pas considéré comme un graphique.

La plupart des systèmes de dessin, tels que : SVG (Scalable Verctor Graphics, graphiques vectoriels scalables), Adobe Illustrator, etc., sont basés sur des chemins.

Lorsque vous utilisez ces systèmes de dessin, vous devez d'abord définir un tracé, puis le tracer ou le remplir, ou vous pouvez le tracer et le remplir pour que la forme puisse être affichée.

Trois méthodes de dessin dans Canvas :

Dans l'environnement de dessin Canvas, les segments de ligne sont également dessinés en fonction de chemins, appelés chemins linéaires. Les méthodes pour créer des chemins linéaires sont : moveTO() et lineTo(). Ce n'est qu'en appelant la méthode Stroke() après avoir créé le chemin que la ligne peut être créée. les segments soient dessinés dans Canvas.

Il s'agit de la méthode de dessin basée sur un tracé que nous avons mentionné plus tôt, qui doit être tracé ou rempli ;

Habituellement, deux points sont reliés par une ligne, donc dessiner un segment de ligne est très simple. Spécifiez le point de départ de la ligne via moveTO() et passez à un autre point via lineTo().

 function drawLine(){ cxt.moveTo(50, 50); cxt.lineTo(100, 100);}

Cependant, nous ne pouvons pas voir les segments de ligne dans le canevas, nous avons mentionné plus tôt que la méthode de dessin basée sur le chemin doit être tracée ou remplie. Donc pour voir le résultat, il faut aussi utiliser la méthode Stroke().

Nous modifions donc la méthode comme suit pour qu'un segment de ligne soit dessiné

 function drawLine(){ cxt.moveTo(50, 50); cxt.lineTo(200, 200);

Nous pouvons également dessiner des segments de ligne dans le canevas en utilisant uniquement lineTo(). Nous modifions le code ci-dessus comme indiqué ci-dessous, et l'effet est le même.

 function drawLine(){ cxt.lineTo(50, 50); cxt.lineTo(200, 200);

Résumer l'utilisation de moveTo() et lineTo()

• moveTo(x,y) : déplacez le trait vers les coordonnées spécifiées x et y, en ajoutant un sous-chemin au chemin actuel. Cette méthode n'effacera aucun sous-chemin dans le chemin actuel.
• lineTo(x,y) : trace une ligne droite depuis la position actuelle jusqu'aux positions x et y spécifiées. S'il n'y a pas de sous-chemins dans le chemin actuel, cette méthode se comporte de la même manière que moveTo(). S'il existe un sous-chemin dans le chemin actuel, cette méthode ajoutera le point que vous spécifiez au sous-chemin.

Modifier la largeur d'un segment de ligne

 fonction= 14 ; cxt.lineTo(50, 50); cxt.lineTo(200, 200);

 function drawLine(){ cxt.lineWidth = 14; cxt.strokeStyle = 'vert'; cxt.lineTo(50, 50);

Nous pouvons également utiliser l'objet CanvasGradient ou l'objet CanvasPattern pour ajouter des couleurs ou des motifs dégradés aux segments de ligne.

 function drawLine(){ cxt.lineWidth = 14; var gradient = cxt.createLinearGradient(0, 0, canvas.width/2, canvas.height/2); 0,5, 'violet'); gradient.addColorStop(1, 'jaune'); dégradé; cxt.lineTo(50, 50); cxt.lineTo(200, 200);

À partir des trois méthodes de dessin dans le canevas ci-dessus, nous pouvons voir que le chemin de l'arc dans la deuxième rangée est un chemin ouvert et que le chemin de l'arc dans la dernière ligne est un chemin fermé. Alors, comment obtenir un chemin fermé ?

Jetons un coup d'œil à deux des méthodes les plus importantes pour dessiner un chemin dans Canvas.

• BeginPath() : effacez tous les sous-chemins actuels pour réinitialiser le chemin actuel et replanifier un chemin.
• closePath() : utilisé pour fermer un chemin ouvert. Ce n'est pas nécessaire. Si le graphique est déjà fermé, c'est-à-dire que le point actuel est le point de départ, cette fonction ne fait rien.

Dessinez d'abord une polyligne

 function drawLine(){ cxt.strokeStyle = 'green'; cxt.lineWidth = 2; cxt.moveTo(50, 50); );}

Modifiez le code dans l'exemple ci-dessus et ajoutez les méthodes startPath() et closePath() au code.

 function drawLine(){ //Triangle de trait cxt.StrokeStyle = 'green'; cxt.lineWidth = 2; cxt.moveTo(50, 50); (); cxt.beginPath(); cxt.lineTo(150, 150); cxt.lineTo(150, 250); cxt.AVC(); cxt.closePath();}

On voit que nous avons tracé deux chemins dans la toile

Remarque : Après avoir appelébeginPath(), ou lorsque le canevas est créé pour la première fois, la première commande de construction de chemin est généralement considérée comme moveTo(). Nous devons donc d’abord utiliser beginPath() lors du dessin de graphiques.

Continuons à modifier notre code

 function drawLine(){ //Triangle de trait cxt.StrokeStyle = 'green'; cxt.beginPath(); cxt.lineTo(50, 150); (150, 150); cxt.closePath(); //Polyline cxt.translate(150, 0); cxt.strokeStyle = 'red'; cxt.lineWidth = 2; cxt.moveTo(50, 50); cxt.lineTo(150, 150); cxt.AVC(); cxt.closePath(); //Triangle rempli de vert cxt.translate(150, 0); cxt.fillStyle = 'green'; cxt.beginPath(); .lineTo(50, 150); cxt.lineTo(150, 150); cxt.fill(); cxt.closePath(); //Triangle rempli de rouge cxt.translate(150, 0); cxt.fillStyle = 'red'; 50, 50); cxt.lineTo(50, 150); cxt.lineTo(150, 150); cxt.closePath(); cxt.fill();}

À partir de l’exemple ci-dessus, nous pouvons voir que les différentes positions de closePath() affecteront également nos graphiques.

Remarque : lorsque vous appelez la fonction fill(), toutes les formes non fermées seront automatiquement fermées, la fonction closePath() n'est donc pas nécessaire pour le moment.

Mais appeler Stroke() : Si vous utilisez uniquement closePath() avant la méthode Stroke(), un chemin fermé sera formé. Si vous appelez la méthode closePath() après la méthode Stroke(), le graphique a été dessiné et le courant. le chemin de dessin a été fermé, donc la méthode closePath() ne fonctionne pas.

Regardons d'abord un exemple

 function drawLine(){ //Triangle de trait cxt.lineWidth = 1; cxt.beginPath( ); ; cxt.moveTo(50,5, 150,5); cxt.lineTo(450,5, 150,5); cxt.AVC();}

Nous pouvons voir sur l'image que nous définissons la largeur de ligne des deux segments de ligne sur 1 pixel, mais le segment de ligne ci-dessus dessine deux pixels.

Si vous dessinez un segment de ligne de 1 pixel de large à la limite de 2 pixels donnés, le segment de ligne occupera en réalité 2 pixels de large ;

Parce que lorsque vous dessinez un segment de ligne verticale d'un pixel de large au niveau d'une bordure de pixel, l'objet d'environnement de dessin du canevas essaiera de dessiner un demi-pixel à droite de la ligne centrale de la bordure et l'autre demi-pixel à gauche de la bordure. ligne médiane.

Cependant, il n'est pas possible de tracer un segment de ligne d'un demi-pixel de large dans un pixel complet, donc un demi-pixel dans les deux directions est étendu à 1 pixel.

D'un autre côté, le dessin se situe entre deux pixels, de sorte que les demi-pixels situés aux extrémités gauche et droite de la ligne centrale ne s'étendront pas et qu'ils occuperont exactement la largeur de 1 pixel. Ainsi, si vous souhaitez dessiner un segment de ligne d'une largeur réelle de 1 pixel, vous devez dessiner le segment de ligne entre deux pixels.

Maintenant que nous comprenons comment dessiner un véritable segment de ligne de 1 pixel, commençons à dessiner la grille.

 function drawLine(stepx, stepy){ cxt.lineWidth = 0.5; cxt.strokeStyle = 'green'; //Dessine une ligne verticale pour (var i= stepx + 0.5; i< cxt.canvas.width; i+= stepx){ cxt .beginPath(); cxt.moveTo(i, 0); cxt.lineTo(i, cxt.canvas.height); cxt.stroke(); } //Dessinez une ligne horizontale pour (var i= stepy + 0.5; i< cxt.canvas.height; i+= stepy){ cxt.beginPath(); moveTo (0, i); cxt.lineTo(cxt.canvas.width, i); }}drawLine(10, 10);

Dans l'exemple ci-dessus, nous dessinons le segment de ligne sur le pixel entre deux pixels, et le segment de ligne dessiné n'a que 0,5 pixel de large.

Bien que la spécification du canevas ne le stipule pas explicitement, toutes les implémentations du navigateur Canvas utilisent la technologie d'anticrénelage pour créer des effets de dessin de segments de ligne sous-pixel.

Cette section explique principalement la méthode de dessin de chemins linéaires dans Canvas, en utilisant principalement moveTo() pour définir le point de départ, lineTo() pour définir le point final et Stroke() pour dessiner le chemin actuel. Ces trois méthodes dessinent des segments de ligne

Il existe deux méthodes importantes pour tracer des chemins dans Canvas, BeginPath() et closePath(). Appeler BeginPath() avant de dessiner des graphiques est une étape nécessaire pour dessiner plusieurs graphiques.

closePath() peut être omis lors de l'utilisation de fill(), et vous devez également faire attention à la position d'appel de la méthode closePath().

Lors du dessin d'un segment de ligne, nous pouvons utiliser lineWidth pour modifier la largeur du segment de ligne et StrokeStyle pour changer la couleur du segment de ligne.

Déterminez les limites de pixels du segment de ligne afin que nous puissions dessiner une véritable largeur de ligne de 1 pixel.

Les étudiants qui souhaitent dessiner des graphiques sur toile doivent continuer à prêter attention aux mises à jour ultérieures. S'il y a un problème, veuillez le signaler et communiquer davantage.

Ce qui précède représente l’intégralité du contenu de cet article. J’espère qu’il sera utile à l’étude de chacun. J’espère également que tout le monde soutiendra le réseau VeVb Wulin.