So schreiben Sie ein rechtwinkliges Dreieck in JavaScript

JavaScript ist eine weit verbreitete Skriptsprache, mit der interaktive und dynamische Effekte auf Webseiten erzielt werden. In dieser Sprache können wir mit nur wenigen Codezeilen problemlos verschiedene Formen und Figuren zeichnen, einschließlich rechtwinkliger Dreiecke.

Das rechtwinklige Dreieck ist eine sehr einfache geometrische Figur, bestehend aus einem rechten Winkel und zwei spitzen Winkeln. In diesem Artikel erfahren Sie, wie Sie mit JavaScript ein Programm schreiben, das ein rechtwinkliges Dreieck zeichnen kann.

Erstens lernen wir, wie man mit HTML und CSS ein Canvas-Element erstellt, das den zum Zeichnen erforderlichen Container darstellt.

HTML-Beispiel:

CSS-Beispiel:

canvas { border: 1px solid black; }

Der obige HTML-Code erstellt ein Canvas-Element mit einem schwarzen Rand und platziert es sowohl in der Breite als auch in der Breite Höhe sind auf 500 Pixel eingestellt. Als Nächstes müssen wir JavaScript-Code vorbereiten, um in diesem Canvas-Element ein rechtwinkliges Dreieck zu zeichnen.

Zuerst müssen wir dieses Canvas-Element in JavaScript abrufen:

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

Als nächstes müssen wir das Kontextobjekt des Canvas-Elements abrufen, das eine Reihe verwendeter Methoden enthält So zeichnen Sie Grafiken:

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

Jetzt können wir mit dem Zeichnen eines rechtwinkligen Dreiecks beginnen, indem wir die Methoden des ctx-Objekts verwenden.

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

Im obigen Code beginnen wir einen neuen Pfad, indem wir die Methodectx.beginPath()aufrufen und dann die Methodectx.moveTo()-Methode zum Verschieben Verschieben Sie den Pfad zur Startposition (100.100), zeichnen Sie dann mit der Methode ctx.lineTo()die beiden rechtwinkligen Seiten des rechtwinkligen Dreiecks und rufen Sie schließlichctx.closePath()beendet den Pfad und verwendet dann die Methodectx.Stroke(), um den Umriss des Pfads zu zeichnen.ctx.beginPath()方法开始一条新路径，然后使用ctx.moveTo()方法将路径移动到起点位置(100,100)，接着使用ctx.lineTo()方法分别绘制出该直角三角形的两条直角边，最后调用ctx.closePath()方法结束路径，然后使用ctx.stroke()方法将路径的轮廓线绘制出来。

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(50, 50, 100, 200);