Comment dessiner un carré en utilisant javascript

Dessiner un carré à l'aide de JavaScript est simple, il vous suffit de connaître l'API de dessin classique. Dans l'article suivant, nous expliquerons comment dessiner un carré à l'aide de l'API JavaScript Canvas.

Étape 1 : Créer un élément canevas

Tout d'abord, nous devons créer un élément canevas dans la page HTML pour dessiner le carré. Nous pouvons utiliser le code suivant :

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

Parmi eux, le paramètre id est utilisé pour identifier de manière unique l'élément canevas, et les paramètres width et height sont utilisés pour définir la taille de l'élément canevas.

Étape 2 : Récupérer l'élément canevas

En JavaScript, nous devons utiliser la méthode document.getElementById() pour obtenir l'élément canevas. Nous pouvons passer à cette méthode en fonction du paramètre id comme suit :

const canvas = document.getElementById("myCanvas");

Maintenant que nous avons obtenu l'élément canevas, nous devons ensuite dessiner en utilisant le contexte de dessin canevas.

Étape 3 : Dessiner un carré

On peut dessiner un carré en formulant les quatre points du carré. Pour dessiner un carré, nous devons spécifier les coordonnées des coins supérieur gauche et inférieur droit. Le code suivant peut être utilisé pour dessiner un carré rouge :

const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.fillStyle = "red";
ctx.fillRect(50, 50, 100, 100);

Dans ce code, on obtient d'abord le contexte de dessin de la toile. Ensuite, nous définissons la couleur du carré à l'aide de la couleur de remplissage (rouge). En commençant à la position 50, 50 et en spécifiant une largeur et une hauteur de 100, nous avons réussi à créer un carré de 100x100.

Étape 4 : Implémenter l'interactivité

Afin d'augmenter l'interactivité, nous pouvons utiliser la méthode JavaScript AttachEvent pour lier les événements de la souris à l'élément canevas. De cette façon, lorsque l’utilisateur clique sur l’élément canevas, nous pouvons dessiner un autre carré. Voici le code d'implémentation complet :

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
canvas.addEventListener("click", handleClick);

function handleClick(event) {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.fillStyle = "red";
  ctx.fillRect(50, 50, 100, 100);
  ctx.beginPath();
  ctx.fillStyle = "blue";
  ctx.fillRect(150, 150, 50, 50);
}

Dans cet exemple, nous définissons un écouteur d'événement de clic pour l'élément canvas Lorsque l'utilisateur clique, nous effaçons le canevas et dessinons le bleu au nouvel emplacement. carrés colorés.

Summary

Dans cet article, nous avons montré comment dessiner un carré à l'aide de l'API Canvas en JavaScript. Nous ne couvrons ici que quelques connaissances de base sur le dessin de carrés en JavaScript. En plus de cela, il existe d'autres méthodes qui peuvent être utilisées pour dessiner, telles que des tracés, des lignes, des ombrages, etc. Cependant, une fois que l’on comprend les bases, d’autres méthodes ne sont pas difficiles à maîtriser. Ensuite, vous pouvez passer à des méthodes de dessin plus complexes pour enrichir votre expérience de développement HTML et JavaScript.

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!