Comment dessiner des graphiques sur la toile HTML5?

Pour dessiner avec HTML5 Canvas, créez d'abord l'élément Canvas dans HTML et obtenez son contexte 2D en JavaScript. Les étapes sont les suivantes: 1. Ajoutez la balise dans HTML et définissez l'ID et la taille; 2. Utilisez document.getElementById () pour obtenir l'objet Canvas et appelez getContext ('2D') pour obtenir le contexte de dessin; 3. Utilisez FillRect (), BeginPath (), LineTo () et d'autres méthodes pour dessiner des formes; 4. Réglez Fillstyle, StrokeSetyle, Linewidth et d'autres propriétés pour ajuster le style graphique; 5. Utilisez l'arc () et d'autres méthodes pour dessiner des chemins ou des graphiques complexes. BeginPath () doit être appelé avant de dessiner une nouvelle figure pour éviter la confusion du style.

Pour dessiner des graphiques sur le canevas HTML5, vous commencez par configurer un élément <canvas></canvas> dans votre HTML, puis utilisez JavaScript pour accéder à son contexte de dessin et commencer à créer des formes, des lignes, du texte et plus encore. Ce n'est pas compliqué une fois que vous avez compris les méthodes de base.

Configuration de la toile

Tout d'abord, vous avez besoin d'un élément de canevas réel dans votre fichier html. Cela ressemble à ceci:

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

Cela crée une zone de dessin vide. Vous pouvez définir la taille directement dans la balise en utilisant width et height . Ne comptez pas sur CSS pour la mise à l'échelle à moins que vous ne sachiez ce que vous faites - cela étirera la toile au lieu de changer le nombre réel de pixels.

Une fois que la toile est là, prenez son contexte de dessin 2D avec JavaScript:

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

Maintenant, vous êtes prêt à dessiner.

Dessin de formes de base

Avec le contexte ( ctx ) disponible, vous pouvez commencer à créer des formes simples comme les rectangles et les triangles.

• Les rectangles sont simples:

   CTX.FillStyle = 'Blue';
  CTX.Fillrect (50, 50, 100, 100);

  Cela tire un carré bleu à (50, 50) qui mesure 100x100 pixels.

• Les triangles nécessitent un peu plus de configuration car ce sont des chemins personnalisés:

   ctx.beginPath ();
  ctx.moveto (100, 100); // point de départ
  ctx.lineto (150, 150); // deuxième point
  ctx.lineto (50, 150); // troisième point
  ctx.closepath ();
  ctx.fill (); // remplit le triangle

N'oubliez pas d'appeler beginPath() avant de dessiner chaque nouvelle forme si vous ne voulez pas qu'elles soient toutes connectées.

Styler vos graphiques

Vous pouvez modifier l'apparence des formes en ajustant les styles de course et de remplissage:

• Utilisez fillStyle pour modifier la couleur ou le gradient à l'intérieur des formes.
• Utilisez strokeStyle pour modifier la couleur du contour.
• Ajustez lineWidth pour rendre les traits plus épais ou plus fins.

Par exemple:

 ctx.strokestyle = '# ff0000';
ctx.linewidth = 5;
ctx.strokect (200, 200, 100, 100);

Cela vous donne un rectangle rouge-ligne avec des bordures épaisses.

Le texte fonctionne également bien:

 ctx.font = '20px arial';
CTX.FillStyle = 'Green';
ctx.fillText («Hello Canvas!», 10, 30);

Qui affiche du texte vert près du coin supérieur gauche.

Travailler avec des chemins

Les chemins vous permettent de créer tout type de forme personnalisée - courbes, zigzags, contours complexes.

Voici comment dessiner un cercle:

 ctx.beginPath ();
ctx.arc (250, 250, 50, 0, math.pi * 2); // x, y, rayon, angle de départ, angle d'extrémité
CTX.FillStyle = 'Purple';
ctx.fill ();

Si vous voulez juste un contour, remplacez .fill() par .stroke() .

Une chose que les gens oublient souvent: appelez toujours beginPath() avant de commencer une nouvelle forme. Sinon, tout est ajouté au même chemin et pourrait se comporter de façon inattendue lorsque vous appliquez des styles ou des transformations.

Fondamentalement, c'est tout. Une fois que vous avez ces bases, vous pouvez combiner des formes, les animer ou même ajouter des images et des gradients. C'est puissant mais n'a pas besoin d'être écrasant.

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!