Comment tracer une ligne sur une toile HTML5?

Pour dessiner des lignes de canevas HTML5, vous devez suivre les étapes suivantes: 1. Créez un élément de canevas avec ID et largeur et hauteur en HTML; 2. Utilisez JavaScript pour obtenir l'élément et appeler getContext ('2D') pour obtenir le contexte de rendu 2D; 3. Appelez BeginPath () Pour démarrer le chemin, Moveto () définit le point de départ, lineTo () définit le point final et tronçon () trace la ligne; 4. Vous pouvez personnaliser le style de ligne via des attributs tels que Linewidth, Strokestyle et LineCap; N'oubliez pas d'appeler BeginPath () avant de tracer une nouvelle ligne, et les coordonnées de ligne sont basées sur l'origine du coin supérieur gauche de la toile, et les lignes seront affichées après avoir appelé Stroke ().

Le dessin d'une ligne sur une toile HTML5 est simple une fois que vous comprenez les étapes de base. Vous avez besoin d'un élément <canvas></canvas> et d'un peu de JavaScript pour définir les points de début et de fin de la ligne.

Voici comment le faire:

1. Configurez l'élément de toile

Tout d'abord, ajoutez une balise <canvas></canvas> dans votre HTML. Donnez-lui un id pour que vous puissiez le référencer en JavaScript et définissez sa width et height .

 <canvas id = "myCanvas" width = "500" height = "300"> </ canvas>

2. Obtenez le contexte de rendu 2d

Dans JavaScript, vous devez obtenir le contexte de toile pour y dessiner. Le contexte 2D fournit des fonctions de dessin.

 const canvas = document.getElementById («myCanvas»);
const ctx = canvas.getContext ('2d');

3. Tracez la ligne

Utilisez les étapes suivantes dans l'ordre:

• Appelez beginPath() pour démarrer un nouveau chemin.
• Utilisez moveTo(x, y) pour définir le point de départ.
• Utilisez lineTo(x, y) pour définir le point final.
• Appelez stroke() pour rendre réellement la ligne.

 ctx.beginPath ();
ctx.moveto (50, 50); // point de départ (x = 50, y = 50)
ctx.lineto (200, 100); // point final (x = 200, y = 100)
ctx.stroke (); // trace la ligne

Personnalisez l'apparence de ligne

Vous pouvez ajuster le style de la ligne en utilisant ces propriétés:

• ctx.lineWidth - Définit l'épaisseur de la ligne.
• ctx.strokeStyle - Définit la couleur ou le gradient.
• ctx.lineCap - définit la forme aux extrémités de la ligne ( 'butt' , 'round' , 'square' ).

Exemple avec style:

 ctx.beginPath ();
ctx.moveto (50, 50);
ctx.lineto (200, 100);
ctx.linewidth = 5;
ctx.strokestyle = 'bleu';
ctx.linecap = 'rond';
ctx.stroke ();

Notes à retenir

• Appelez toujours beginPath() avant de démarrer une nouvelle ligne pour éviter de se connecter aux chemins précédents.
• La ligne n'apparaîtra pas avant d'appeler stroke() .
• Les coordonnées sont relatives au coin supérieur gauche de la toile (0,0).

C'est ça. Vous avez maintenant une ligne visible sur votre toile. De là, vous pouvez construire des dessins plus complexes en combinant plusieurs lignes ou formes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!