Svg.circle

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 sich der Kreis auf den Darstellungsbereich bezieht, sodass bei einem entsprechenden Verhältnis von Höhe zu Breite möglicherweise eine Ellipse dargestellt wird.

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.circle(1.2, 2.0, 0.5);
  Svg.circle(3.0, 2.0, 0.8, "#ff0000");
  Svg.circle(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.circle(1.2, 2.0, 0.5, "#ffcc00", "#ff0000");
  Svg.circle(3.0, 2.0, 0.8, "none", "#0000ff");
  Svg.circle(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