taralino

.init

Der Befehl Canvas.init(x, y) erwartet folgende (verpflichtende) Argumente:

Argument	Datentyp	Hinweis
x	Datenfeld	zwei Zahlen (Intervall)
y	Datenfeld	zwei Zahlen (Intervall)

Die Zeichenfläche (Canvas) wird vorbereitet (initialisiert). Genauer definiert x den darzustellenden Bereich der x-Achse und y den darzustellenden Bereich der y-Achse.

Zudem können folgende Optionen verwendet werden:

Variable	Datentyp	Hinweis	Default-Wert
width	Zahl	ganzzahlig, positiv	480
background	Farbe	-	none
scaling	Zeichenkette	on oder off	on
div	Zeichenkette	-	neues DIV-Element

Mit width wird die (maximale) Breite der Zeichnung definiert. Die zugehörige Höhe der Zeichnung ergibt sich automatisch durch die Intervalle x und y. Zudem definiert background die Hintergrundfarbe der Zeichenfläche.

Weiterhin ist zu beachten, dass width stets als maximale Breite zu verstehen ist. Ist diese zu groß, wird automatisch auf eine optimale Größe verkleinert. Um dies zu verhindern, kann scaling auf off gesetzt werden.

Für Anwender mit HTML-Kenntnissen lässt sich mittels div definieren, welches DIV-Element zur Zeichnung verwendet werden soll. Genauer wird das DIV-Element mit der ID div zur anschließenden Zeichnung von Objekten genutzt. Wird die Option nicht verwendet, wird automatisch ein neues DIV-Element erzeugt.

Beispiel

Es wird ein Eis skizziert aus insgesamt sechs Objekten dargestellt.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="taralino.js"></script>
</head>
<body>
<script>

Canvas.init([0,10], [0,6], {width:480, background:"#f2f2f2"});
Canvas.rect(5.0, 1.5, 0.6, 2.0, {fill:"#d09b94"});
Canvas.circle(5.0, 4.5, 1.0, {fill:"orange"});
Canvas.rect(5.0, 3.2, 2.0, 2.6, {fill:"orange"});
Canvas.rect(5.0, 3.6, 2.0, 1.2, {fill:"yellow"});
Canvas.rect(5.0, 2.4, 2.0, 1.2, {fill:"red"});
Canvas.rect(5.6, 3.3, 0.3, 2.4, {fill:[0,0,0,30]});

</script>
</body>
</html>

Vorschau Download Kopie speichern

Beispiel

Zur Veranschaulichung der Option scaling: Ändere die Zeichenkette off in on und aktualisiere die Vorschau.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="taralino.js"></script>
</head>
<body>
<script>

Canvas.init([0,20], [0,2], {width:2000, scaling:"off", background:"#f2f2f2"});
Canvas.circle( 1, 1, 1, {fill:"red"});
Canvas.circle(10, 1, 1, {fill:"green"});
Canvas.circle(19, 1, 1, {fill:"blue"});

</script>
</body>
</html>

Vorschau Download Kopie speichern

Beispiel

Zur Veranschaulichung der Option div: Entferne die Option div und aktualisiere die Vorschau.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="taralino.js"></script>
</head>
<body>
<div id="mydiv" style="border: 2px solid red;">TEXT</div>
<script>

Canvas.init([0,10], [0,6], {width:400, div:"mydiv"});
Canvas.circle(5, 3, 2);

</script>
</body>
</html>

Vorschau Download Kopie speichern