Toile javascript
Cet article vous reconnaîtra sur
- Qu'est-ce qu'une toile
- Comment activer une toile à l'aide de JavaScript
- Comment redimensionner une toile en utilisant JavaScript
- Comment créer des formes sur une toile à l'aide de JavaScript
Qu'est-ce qu'une toile
Canvas est un conteneur, qui nous permet de dessiner différentes formes, lignes et textes dans un navigateur. Par défaut, le conteneur en toile est invisible et n'a pas de bordure. Donc, pour le rendre visible, nous utilisons la balise de toile HTML 5 et la propriété de la frontière CSS.
Syntaxe:
La syntaxe ci-dessus affiche uniquement un conteneur simple avec une bordure.
Comment activer une toile à l'aide de JavaScript
Fondamentalement, Canvas est une balise HTML 5, mais elle n'est opérationnelle qu'à l'aide d'un javascript. Le code suivant est obligatoire pour accéder et activer une toile.
Code:
const canvas = document.queySelector ("# canvas");const Contxt = toile.getContext ("2d");
Dans ce code, nous utilisons la méthode QueySelector () pour obtenir l'ID Canvas qui connectera notre code JavaScript avec la balise Canvas. Ensuite, nous utilisons la méthode getContext () pour spécifier l'environnement d'une toile (2D ou 3D).
Comment redimensionner une toile en utilisant JavaScript
Nous utilisons le code JavaScript pour donner des propriétés de hauteur et de largeur des objets en toile. Si nous utilisons CSS pour donner de la hauteur et de la largeur au conteneur en toile, il pixélera le conteneur plutôt que de le redimensionner. Utilisez donc le code JavaScript suivant pour redimensionner le conteneur Canvas.
Syntaxe:
toile.hauteur = 200;toile.largeur = 400;
Comment créer des formes sur la toile à l'aide de JavaScript
Maintenant, nous allons voir comment nous pouvons créer différentes formes sur toile à l'aide de JavaScript.
Rectangle
Le code JavaScript suivant est utilisé pour créer un rectangle sur la toile.
Syntaxe:
Nom de variable.starekect (valeur_x, valeur_y, largeur, hauteur)Ici, le nom de la variable représente la variable que nous avons créée pour la méthode getContext (). Tandis que la méthode Strockrect () prend quatre paramètres où la valeur x et la valeur y représentent la position sur la toile où vous souhaitez dessiner la forme (rectangle). Tandis que la largeur et la hauteur sont utilisées pour mentionner la taille du rectangle.
Code:
contoxt.starekect (50,50,250,100)Dans ce code, un rectangle est créé avec une largeur de 250px et 100px de hauteur.
Sortir:
Dans le cas, vous souhaitez modifier la couleur du rectangle, ajoutez simplement le code suivant avant votre code de création rectangulaire:
Code:
contoxt.strokestyle = ”bleu”;Sortir:
Rectangle rempli
Le code JavaScript suivant est utilisé pour créer un rectangle rempli sur la toile.
Syntaxe:
Nom de variable.FillRect (valeur_x, valeur_y, largeur, hauteur)La méthode FillRect () prend également les quatre paramètres et est utilisée pour créer un rectangle rempli.
Code:
contoxt.Fillrect (50,50,250,100)Sortir:
Pour changer la couleur du rectangle, utilisez simplement la propriété FillStyle avant votre code de création rectangulaire:
Code:
contoxt.fillstyle = ”aqua”;Sortir:
Cercle
Le code JavaScript suivant est utilisé pour créer un cercle sur la toile.
Syntaxe:
Nom de variable.arc (Value-X, valeur-y, cercle-radius, angle de démarrage, angle final);Nom de variable.accident vasculaire cérébral();
Ici, la méthode Arc () prend cinq paramètres, y compris la valeur x et la valeur y représentant la position du cercle, du rayon du cercle, de l'angle de démarrage et de la valeur de l'angle de fin. La méthode TRAD () est utilisée dessiner un chemin du cercle qui affiche finalement un cercle.
Code:
contoxt.Arc (180, 100, 80, 0, 2 * Math.PI);contoxt.accident vasculaire cérébral();
Sortir:
Doubler
Le code JavaScript suivant est utilisé pour créer une ligne sur la toile.
Syntaxe:
Nom de variable.BeginPath ();Nom de variable.MOVETO (Value-X, Value-y);
Nom de variable.lineTo (start-point, terminal);
Nom de variable.accident vasculaire cérébral();
Dans cette syntaxe,
La méthode BeginPath () démarre un chemin,
La méthode moveto () prend deux valeurs x et y qui déplace le curseur vers le point spécifique.
La méthode lineto () prend également deux valeurs, le point de départ à partir de l'endroit où la ligne commence et le point de fin où se termine la ligne.
La méthode TRAD () est utilisée pour dessiner un chemin de la ligne qui affichera éventuellement une ligne.
Code:
contoxt.BeginPath ();contoxt.MOVETO (50,50);
contoxt.lineto (300 150);
contoxt.accident vasculaire cérébral();
Sortir:
Texte
Le code JavaScript suivant est utilisé pour écrire un texte sur la toile.
Syntaxe:
Nom de variable.FONT = "Font-Font Font-Family";Nom de variable.fillstyle = "couleur";
Nom de variable.fillText ("affichage-text", valeur-x, valeur-y);
Tout d'abord, vous devez mentionner la taille de la police et la famille des polices en utilisant la propriété de police. Deuxièmement, fournissez la couleur si vous souhaitez utiliser la propriété Fillstyle. Enfin, la méthode FillText () prend trois valeurs, texte, valeur x et valeur y.
Code:
contoxt.font = "50px arial";contoxt.fillstyle = "LightGreen";
contoxt.FillText ("Canvas", 110, 120)
Sortir:
Texte creux
Le code JavaScript suivant est utilisé pour écrire un texte creux sur la toile.
Syntaxe:
Nom de variable.FONT = "Font-Font Font-Family";Nom de variable.strokestyle = "couleur";
Nom de variable.strokeText ("affichage-text", valeur-x, valeur-y);
Ici stroketext (), la méthode est utilisée pour rédiger du texte dans un style creux…
Code:
contoxt.font = "50px arial";contoxt.strokestyle = "orange";
contoxt.Stroketext ("Canvas", 110, 120)
Sortir:
Conclusion
Canvas est un tableau artistique pour dessiner des graphiques 2D ou 3D sur un navigateur. Dans cet article, nous avons appris comment nous pouvons dessiner un cercle, un rectangle, une ligne et un texte sur une toile via JavaScript. Bien que Canvas soit une balise HTML5, les opérations sur toile ne peuvent être effectuées qu'à l'aide d'un code JavaScript.