Svg.disc

zur Darstellung von Kreisen

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:

x	Gleitkommazahl
y	Gleitkommazahl
r	Gleitkommazahl
c1	Farbe als String oder Array (optional)
c2	Farbe als String oder Array (optional)

Die Funktion zeichnet einen Kreis mit Mittelpunkt und Radius . Dabei ist zu beachten, dass Kreis in dieser Funktion unabhängig vom Darstellungsbereich bzw. dem entsprechenden Verhältnis von Höhe zu Breite zu verstehen ist. Genauer wird bei einem Darstellungsverhältnis ungleich 1 der kleinere Radius verwendet.

Durch c1 wird die Farbe der Füllung definiert, durch c2 die Farbe der Umrandung / Linie. Beide Argumente sind optional, wobei ohne Farbdefinition ein schwarzer Kreis 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 Kreise 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.disc(1.2, 2.0, 0.5);
  Svg.disc(3.0, 2.0, 0.8, "#ff0000");
  Svg.disc(4.8, 2.0, 0.5, [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.disc(1.2, 2.0, 0.5, "#ffcc00", "#ff0000");
  Svg.disc(3.0, 2.0, 0.8, "none", "#0000ff");
  Svg.disc(4.8, 2.0, 0.5, "none", [0,200,0]);
  Svg.draw();
</script>
</body>
</html>

Vorschau aktualisieren

Beispiel

Das folgende Beispiel demonstriert den Unterschied zwischen circle und disc. Der Unterschied wird deutlich, da (anders als in den Beispielen zuvor) ein entsprechendes Darstellungsverhältnis ungleich 1 gewählt wird.

<!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, 8);
  Svg.clear("#f0f0f0");
  Svg.disc(3.0, 4.0, 2.0, "#ff0000");
  Svg.circle(3.0, 4.0, 2.0, "none", "#0000ff");
  Svg.draw();
</script>
</body>
</html>

Vorschau aktualisieren

Impressum und Kontakt

Datenschutzerklärung

Rechtliche Hinweise