Comment écrire un triangle rectangle en JavaScript

JavaScript est un langage de script largement utilisé pour obtenir des effets interactifs et dynamiques sur les pages Web. Dans ce langage, nous pouvons facilement dessiner diverses formes et figures, y compris des triangles rectangles, avec seulement quelques lignes de code.

Le triangle rectangle est une figure géométrique très basique, composée d'un angle droit et de deux angles aigus. Dans cet article, nous allons explorer comment utiliser JavaScript pour écrire un programme capable de dessiner un triangle rectangle.

Tout d’abord, apprenons à utiliser HTML et CSS pour créer un élément Canvas, qui est le conteneur nécessaire au dessin.

Exemple HTML :

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

Exemple CSS :

canvas {
    border: 1px solid black;
}

Le code HTML ci-dessus crée un élément Canvas avec une bordure noire et définit sa largeur et sa hauteur sur 500 pixels. Ensuite, nous devons préparer du code JavaScript pour dessiner un triangle rectangle dans cet élément Canvas.

Tout d'abord, nous devons obtenir cet élément Canvas en JavaScript :

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

Ensuite, nous devons obtenir l'objet contextuel de l'élément Canvas, qui contient une série de méthodes pour dessiner des graphiques :

var ctx = canvas.getContext("2d");

Maintenant, nous pouvons ensuite utiliser les méthodes sur l'objet ctx pour commencer à dessiner un triangle rectangle.

ctx.beginPath(); // 开始路径
ctx.moveTo(100, 100); // 移动到起始位置
ctx.lineTo(100, 300); // 绘制垂直边
ctx.lineTo(300, 300); // 绘制水平边
ctx.closePath(); // 结束路径
ctx.stroke(); // 绘制轮廓线

Dans le code ci-dessus, nous commençons un nouveau chemin en appelant la méthode ctx.beginPath(), puis utilisons la méthode ctx.moveTo() pour déplacer le chemin vers la position de départ ( 100,100), puis utilisez la méthode ctx.lineTo() pour dessiner respectivement les deux côtés rectangles du triangle rectangle, et enfin appelez le ctx.closePath( ) pour terminer le chemin, puis utilisez La méthode ctx.Stroke() dessine le contour du chemin. ctx.beginPath()方法开始一条新路径，然后使用ctx.moveTo()方法将路径移动到起点位置(100,100)，接着使用ctx.lineTo()方法分别绘制出该直角三角形的两条直角边，最后调用ctx.closePath()方法结束路径，然后使用ctx.stroke()方法将路径的轮廓线绘制出来。

通过以上代码，我们就成功地在Canvas元素中绘制了一条直角三角形。但是，这样的绘图代码在需要绘制多个直角三角形时并不方便。因此，我们可以将它们封装成一个函数，以便在需要时直接调用。

function drawRightTriangle(x, y, width, height) {
    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.lineTo(x, y + height);
    ctx.lineTo(x + width, y + height);
    ctx.closePath();
    ctx.stroke();
}

上述代码中，我们定义了一个名为drawRightTriangle

Avec le code ci-dessus, nous avons réussi à dessiner un triangle rectangle dans l'élément Canvas. Cependant, un tel code de dessin n'est pas pratique lorsque plusieurs triangles rectangles doivent être dessinés. Par conséquent, nous pouvons les encapsuler dans une fonction à appeler directement en cas de besoin.

drawRightTriangle(50, 50, 100, 200);

Dans le code ci-dessus, nous définissons une fonction nommée drawRightTriangle, qui accepte quatre paramètres : x et y sont les coordonnées de départ du triangle rectangle, la largeur et la hauteur sont la largeur du triangle rectangle et hauteur. Cette fonction est fondamentalement la même que le code précédent, sauf que le code permettant de dessiner un triangle rectangle est encapsulé dans une forme de fonction. Lors de l'appel de cette fonction, il vous suffit de transmettre les paramètres correspondants pour dessiner un triangle rectangle avec la position et la taille correspondantes. 🎜rrreee🎜Grâce à la méthode ci-dessus, nous pouvons facilement écrire un programme en JavaScript capable de dessiner un triangle rectangle et réaliser le dessin d'un triangle rectangle avec une position et une taille personnalisables. 🎜

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!