Toile en html | Expliqué avec des exemples

Zoe Martinez
Toile en html | Expliqué avec des exemples
En html, La balise peut être utilisée pour dessiner les graphiques sur les sites Web. Canvas agit comme un conteneur pour les graphiques et pour dessiner les graphiques, nous utilisons un script comme JavaScript. Par conséquent, dans le Tag un attribut ID doit être utilisé qui fait référence élément du javascript. Il peut être utilisé pour dessiner des graphiques bidimensionnels, des images, des animations, etc. Cet article présente un guide complet pour le Tag à l'aide de certains extraits de code.

Dans cet article, nous apprendrons les concepts suivants liés au étiqueter:

  • Bases de la balise
  • Comment créer un élément
  • Comment utiliser la toile avec JavaScript
  • Comment dessiner des formes de base sur la toile

Commençons!

Bases de la balise

Des attributs d'identification, de hauteur et de largeur sont nécessaires pour tout élément. L'attribut ID est utilisé pour se référer à la toile en JavaScript tandis que les attributs de hauteur et de largeur déterminent la taille de la toile. Sur un seul document HMTL, nous pouvons avoir plusieurs balises.

Comment créer un élément

Prenons l'extrait ci-dessous pour comprendre comment créer un élément de toile:

Ici, id = toile qui sera utilisée dans le script pour trouver l'élément de toile, la largeur et la hauteur des attributs de la canevas, la largeur et la hauteur de la toile et l'attribut de 250px et de style est utilisé pour styliser l'élément Canvas.

Comment utiliser la toile avec JavaScript

Dans cette section, nous fournirons un guide étape par étape pour utiliser l'élément avec JavaScript. Nous devons suivre les étapes mentionnées ci-dessous pour continuer:

Tout d'abord, nous devons obtenir l'élément et à cette fin "GetelementId ()" La méthode sera utilisée comme indiqué dans l'extrait de code ci-dessous:

Ensuite, nous créerons un objet de dessin à l'aide d'un objet de construction "GetContext ()" Et à l'intérieur de cet objet, nous spécifierons une dimension comme bidimensionnelle comme indiqué dans la figure ci-dessous:

var objContext = Can.getContext ("2d");

La dernière étape consiste à dessiner sur la toile, nous spécifierons un "Fillstyle" propriété pour définir une couleur pour le dessin:

objcontext.fillstyle = 'gris';

Comment dessiner des formes de base sur la toile

Cette section expliquera comment dessiner un rectangle, une ligne et un cercle sur toile:

Rectangle

Pour dessiner un rectangle sur la toile, nous utiliserons une méthode FillRect (). Il faudra quatre valeurs: d'abord pour la coordonnée x, deuxième pour la coordonnée en y, troisième pour la largeur et quatrième pour la hauteur.

objcontext.Fillrect (10,10,175,85);

Voici notre extrait de code complet pour dessiner un rectangle sur toile:




Pour le code ci-dessus, nous obtiendrons la sortie suivante:

Comme nous spécifions l'espace 10px pour X, Y coordonne donc dans la sortie l'espace autour du haut et du côté gauche vérifie que notre code fonctionne correctement.

Doubler

Voyons maintenant un autre exemple simple pour comprendre comment tracer une ligne sur une toile. Nous utilisons le déménager à() et lineto () Méthode pour spécifier respectivement les points initiaux et finaux de la ligne. Pour tracer la ligne, nous devons utiliser une méthode accident vasculaire cérébral() méthode:




Lors de l'exécution réussie du code, nous obtiendrons la sortie suivante:

Une ligne est tracée sur la toile à partir de (0, 0) et se terminant à (250, 150).

Cercle

Pour dessiner un cercle, nous utiliserons BeginPath () et arc() Méthodes pour commencer un chemin et créer un cercle respectivement. La méthode d'arc prendra des valeurs pour les coordonnées x, y, le rayon du cercle, l'angle de démarrage et l'angle d'extrémité.




Mathématiques.La propriété PI est utilisée comme point final du cercle et ce qui suit sera la sortie:

Dans cette section, nous avons appris à dessiner des formes de base sur une toile telle qu'une ligne, un cercle et un rectangle.

Conclusion

Le La balise est utilisée pour dessiner des graphiques sur des sites Web à l'aide de JavaScript et pour dessiner une forme sur la toile. Quatre étapes essentielles sont requises i.e. Créez votre canevas, récupérez l'élément Canvas à l'aide d'une méthode d'intégration "getElementByid ()», Créez votre objet en utilisant getContext () objet, et enfin dessiner les formes sur la toile. La première moitié de cet article a démontré comment créer et utiliser des éléments de toile et la seconde moitié de ce tutoriel explique comment dessiner des formes de base avec des toiles telles qu'une ligne, un cercle et un rectangle.

c Sharp
Comment utiliser l'héritage en C #
L'héritage permet à une classe de hériter des propriétés et des méthodes d'une autre classe. Il perm...
Mohamed Benoit
Commandes Linux
Comment générer des touches SSH sur Windows Top 10 / Top 10 pour accéder aux serveurs Linux sans mot de passe
Tutoriel pratique sur la façon de générer une touche SSH sur Windows 10 et 11 et l'installez sur un ...
Ines Dubois
c Sharp
Qu'est-ce que les mathématiques.Méthode maximale en C #
Les maths.La méthode max () en C # peut trouver la valeur maximale de deux valeurs spécifiées. Il pr...
Gabriel Bernard
Python
Python stringio
Sarah Roux
Postgresql
Comment copier un tableau d'une base de données à une autre dans PostgreSQL
Lena Martinez
html
Comment utiliser la propriété CSS Flex-Grow?
Julien Dumas
Docker
Quelles sont les étapes pour déployer une image Nginx à l'aide de Docker?
Mélissa Vincent
AWS
Comment EC2 est différent de l'élastique?
Mélissa Vincent
Base de données Oracle
Comment installer Oracle Instant Client dans Linux?
Zoe Martinez
Powershell
Quelles sont les étapes pour lancer Windows PowerShell
Julien Dumas
MS SQL Server
Qu'est-ce que MySQL RDBMS un guide complet
Lena Dupuy
php
Quelle est la différence entre .= et + = opérateurs en php
Lena Dupuy
php
Comment utiliser la fonction php rand
Sarah Roux