Comment créer des formes avec un canevas HTML

Table des matières

1. Présentation
2. Démarrage
3. Dessiner des formes
4. Conclusion

✍️ Présentation

HTML L’élément est utilisé dans la création de contenu comprenant des graphiques. Cela donne aux développeurs la possibilité de dessiner des formes, des textes et des formes, y compris des styles et des animations.

✨ Premiers pas avec Canvas

Lors de la création des formes avec HTML , il existe quelques astuces à configurer

• 1. Ajout de élément à la page HTML pour préciser son utilisation, la balise canvas inclut l'attribut identité(id) qui sera contrôlé dynamiquement par Javascript. Vous devez également définir la largeur et la hauteur pour déterminer la taille de l'élément de toile

• 2. Manipulation du élément avec JavaScript en récupérant l’élément à l’aide de l’ID et en l’attribuant au canevas constant. La méthode getContext("2d") permet de rendre le canevas sous forme de texte, de forme ou d'image.

✏️ Dessiner des formes

? Rectangle

Ces méthodes peuvent être utilisées pour créer un rectangle où x = la coordonnée x du rectangle, y = la coordonnée y du rectangle, largeur = la largeur du rectangle et la hauteur du rectangle.

• fillRect(x, y, largeur, hauteur) Cette méthode crée un rectangle rempli avec un style de remplissage pour lui donner une couleur spécifique.

• StrokeRect (x, y, largeur, hauteur) Cette méthode crée un rectangle de contour ou un rectangle avec un trait, le StrokeStyle peut être utilisé pour y ajouter de la couleur.

• clearRect(x, y, largeur, hauteur) Cette méthode crée un rectangle transparent mais vous devez spécifier la largeur et la hauteur du canevas remplies d'un nom de couleur pour que le rectangle transparent puisse être rendu

? Carré

Les méthodes de création d'un carré sont les mêmes que celles d'un rectangle, la différence est la valeur de largeur qui est la même que la hauteur contrairement au rectangle.

? Triangle

Ces méthodes peuvent être utilisées pour créer un triangle.

-beginPath() : Cette méthode consiste à démarrer un nouveau chemin pour le dessin.
-moveTo(x, y) : Cette méthode permet de déplacer le stylo au premier sommet du triangle
-lineTo(x, y) : Cette méthode dessine le sommet inférieur du triangle.

⚪️ Cercle

Ces méthodes suivantes sont utilisées pour créer un cercle :

• beginPath() : cette méthode pour commencer un chemin.
• arc (x, y, radius, startAngle, endAngle, antihoraire): ceci sert à créer un cercle où x et y sont les coordonnées centrales du centre, radius est le rayon du cercle, startAngle et endAngle qui est un angle pour le cercle.
• Math.PI- Ceci est utilisé pour créer un demi-cercle tandis que le multiplier par 2 donnera un cercle complet

? Ellipse

Cette forme utilise les mêmes types de méthodes mais utilise ;

-ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle, antihoraire) : où
-x et y sont la coordonnée centrale de l'ellipse,
-radiusX et radiusY sont les rayons horizontaux et verticaux du
ellipse,
-rotation affiche la rotation de l'ellipse en radians,
-startAngle et endAngle indiquent les angles de début et de fin du
dessin, en radians et
-dans le sens inverse des aiguilles d'une montre qui est facultatif avec la valeur vrai ou faux
(la valeur par défaut est fausse).

? Parallélogramme

Cette forme utilise les méthodes suivantes :

• beginPath pour démarrer un nouveau chemin de dessin et moveTo(x, y) pour définir le premier coin puisque la forme a 4 côtés avec 4 coins.
• lineTo pour tracer les lignes qui les relieront entre elles puisqu'il y a 4 côtés.

? Trapèze

Cette forme est assez similaire au parallélogramme, ils utilisent les mêmes méthodes pour les dessiner. La seule différence à leur sujet réside dans les valeurs des coordonnées.

? Cône

Cette forme combine les méthodes de dessin du triangle avec les méthodes du demi-cercle.

? Polygone

Pour créer un polygone, vous devez déterminer les côtés de la forme car il existe un nombre différent de côtés.

Ces méthodes suivantes sont utilisées pour créer un polygone :

• beginPath() : cette méthode consiste à créer une nouvelle forme.
• closePath() : cette méthode consiste à terminer la forme.
• cx : sa valeur pour le centre des coordonnées x.
• cy : sa valeur spécifie le centre des coordonnées y.
• rayon : rayon de la forme.

Pour obtenir l'angle, il faut calculer avec cette formule en divisant le cercle en deux ;

angle = 2π/ n

• pentagone

• hexagone
  

• heptagone

• octogone

• nonagone

• décagone

Conclusion

Enfin, nous sommes arrivés à la fin de cet article. Les formes que nous avons créées ont une série de méthodes pour les dessiner.

Merci d'avoir lu. Connectez-vous avec moi sur
Linkedin

X

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!