Svg.triangle

zur Darstellung von Dreiecken

q r s u t

Funktionsübersicht

.init .resize .clear .draw .dot .circle .disc .rect .triangle .line .arrow .text .export_svg

Beschreibung

Die Funktion besitzt folgende Argumente:

x1	Gleitkommazahl
y1	Gleitkommazahl
x2	Gleitkommazahl
y2	Gleitkommazahl
x3	Gleitkommazahl
y3	Gleitkommazahl
c1	Farbe als String oder Array (optional)
c2	Farbe als String oder Array (optional)

Die Funktion zeichnet ein Dreieck mit den Eckpunkten , und .

Durch c1 wird die Farbe der Füllung definiert, durch c2 die Farbe der Umrandung / Linie. Beide Argumente sind optional, wobei ohne Farbdefinition ein schwarzes Dreieck dargestellt wird.

Zur Definition einer Farbe kann entweder ein String als hexadezimale RGB-Definition verwendet werden (beispielsweise "#ff0000" für rot) oder aber ein Array mit drei Einträgen als RGB-Definition, wobei jeweils ganzzahlige Einträge zwischen 0 und 255 erwartet werden (beispielsweise [255,0,0] für rot). Als Spezialfall kann der String "none" übergeben werden, um insbesondere eine Darstellung ohne Füllung zu erreichen.

Beispiel

Das folgende Beispiel initialisiert das Svg-Paket, definiert den Darstellungsbereich und setzt die Hintergrundfarbe auf grau. Anschließend werden insgesamt drei Dreiecke gezeichnet, wobei jeweils unterschiedliche Möglichkeiten zur Definition der Farbe verwendet werden.

<!DOCTYPE html>
<html>
<head>
  <script src="taramath.js"></script>
</head>
<body>
<div id="plot"></div>
<script>
  Svg.init("plot", 480, 320);
  Svg.resize(0, 6, 0, 4);
  Svg.clear("#f0f0f0");
  Svg.triangle(0.5, 1.0, 1.5, 1.0, 1.0, 3.0);
  Svg.triangle(2.0, 1.0, 4.0, 1.0, 3.0, 3.5, "#ff0000");
  Svg.triangle(4.5, 1.0, 5.5, 1.0, 5.0, 3.0, [0,200,0]);
  Svg.draw();
</script>
</body>
</html>

Vorschau aktualisieren

Beispiel

<!DOCTYPE html>
<html>
<head>
  <script src="taramath.js"></script>
</head>
<body>
<div id="plot"></div>
<script>
  Svg.init("plot", 480, 320);
  Svg.resize(0, 6, 0, 4);
  Svg.clear("#f0f0f0");
  Svg.triangle(0.5, 1.0, 1.5, 1.0, 1.0, 3.0, "#ffcc00", "#ff0000");
  Svg.triangle(2.0, 1.0, 4.0, 1.0, 3.0, 3.5, "none", "#0000ff");
  Svg.triangle(4.5, 1.0, 5.5, 1.0, 5.0, 3.0, "none", [0,200,0]);
  Svg.draw();
</script>
</body>
</html>

Vorschau aktualisieren

Impressum und Kontakt

Datenschutzerklärung

Rechtliche Hinweise