Dokumentation (canvas.quaese.de)
 

Anwendungen - Regelmäßige Vielecke

Inspiriert durch einen Artikel vom 03. Juni 2009 auf ajaxschmiede.de wurde ein Script entwickelt, mit dessen Hilfe regelmäßige Vielecke und Polygramme in ein <canvas>-Element gezeichnet werden können.

Das JS-Objekt stellt neben den Methoden zum Zeichnen der gewünschten Polygonzüge auch Routinen zum Modifizieren von Linen- und Füllstyle zur Verfügung. Diese können bequem mit der Punktnotation verkettet werden, so dass zahlreiche Manipulation über einen Initialisierungaufruf abgearbeitet werden können.

Download

Soll die Funktionalität auch im Internet Explorer verfügbar gemacht werden, muss das explorercanvas-Script eingebunden werden. Dieses steht unter nachstendem Link zum Download bereit.

Beispiel

Das Beispiel demonstriert einige Vielecken und Polygramme.

Ihr Browser unterstützt das Canvas-Element nicht!

Quellcode zum Beispiel

Die Figuren aus dem Beispiel wurde mit nachstehendem Quellcode realisiert. Voraussetzung für das Funktionieren ist, dass die JS-Datei mit dem erforderlichen Script korrekt eingebunden wurde.

window.onload = function(){
  // Umfanglinie eines gezackten Vieleck mit 5 Zacken, Aussenradius 30, Innenradius 20, 0° Startwinkel
  qpPoly('canvas_id', {w: 300, h: 300}).strokeZPoly(50, 50, 30, 20, 5, 0);
  // Umfanglinie eines gezackten Vieleck mit 5 Zacken, Aussenradius 30, Innenradius 20, 36° Startwinkel
  qpPoly('canvas_id').strokeStyle('#0f0').strokeZPoly(50, 50, 30, 20, 5, 36);

  // 1. Füllfarbe ändern nach #333
  // 2. Gezacktes gefülltes Vieleck mit 8 Zacken, Aussenradius 40, Innenradius 20
  // 3. Linkenfarbe ändern nach #fff
  // 4. Umfanglinie eines gezackten Vielecks mit 8 Zacken, Aussenradius 35, Innenradius 20
  qpPoly('canvas_id').fillStyle('#333').fillZPoly(100, 100, 40, 20, 8, 0).strokeStyle('#fff').strokeZPoly(100, 100, 35, 10, 8, 0);

  // 1. Linienfarbe nach #f00 ändern
  // 2. Umfanglinie eines gezackten Vielecks mit 5 Zacken, Aussenradius 30, Innenradius 20, Startwinkel 0°
  // 3. Linienfarbe nach #fc0 ändern
  // 4. Umfanglinie eines gezackten Vielecks mit 5 Zacken, Aussenradius 30, Innenradius 20, Startwinkel 24°
  // 5. Linienfarbe nach #00f ändern
  // 6. Umfanglinie eines gezackten Vielecks mit 5 Zacken, Aussenradius 30, Innenradius 20, Startwinkel 48°
  qpPoly('canvas_id')
  .strokeStyle('#f00').strokeZPoly(180, 150, 30, 20, 5, 0)
  .strokeStyle('#fc0').strokeZPoly(180, 150, 30, 20, 5, 24)
  .strokeStyle('#00f').strokeZPoly(180, 150, 30, 20, 5, 48);

  // Gefülltes Vieleck (Fünfeck) zeichnen, Radius 30, Ecken 5, Startwinkel 0°
  qpPoly('canvas_id').fillStyle('#ccc').fillPoly(160, 40, 30, 5, 0);
  // Umrandungen eines Vielecks (Fünfeck) zeichnen, Radius 30, 20, 10, Ecken 5, Startwinkel 0°
  qpPoly('canvas_id').strokeStyle('#000')
  .strokePoly(160, 40, 30, 5, 0)
  .strokePoly(160, 40, 20, 5, 0)
  .strokePoly(160, 40, 10, 5, 0);

  // Umrandungen eines Polygramms (Pentagramm) zeichnen, Radius 40, Ecken 5, Startwinkel 36°
  qpPoly('canvas_id').strokeStyle('#0a0').PolyGram(50, 240, 40, 5, 36);

  // Umrandungen eines Polygramms (Pentagramm) zeichnen, Radius 40, Ecken 7, Startwinkel 36°
  qpPoly('canvas_id').strokeStyle('#aa0').PolyGram(150, 240, 40, 7, 36);

  // Umrandungen eines Polygramms (Pentagramm) zeichnen, Radius 40, Ecken 9, Startwinkel 36°
  qpPoly('canvas_id').strokeStyle('#0aa').PolyGram(250, 240, 40, 9, 36);
}

Integration in die Seite

Um korrekt zu funktionieren, müssen diverse Vorbereitungen getroffen werden. Diese werden nun beschrieben.

HTML

Zur Anzeige wird das HTML5-Element <canvas> verwendet.

<canvas id="canvas_id"></canvas>

Die ID muss vorhanden sein, da sie zum Referenzieren des Elements dient.

Externes JavaScript

Als nächstes wird das für das Zeichnen regelmässiger Vielecke benötigte JavaScript im head-Bereich des Dokuments als externe JS eingebunden. Damit stehen das neue Objekt und dessen Funktionalität zur Verfügung.

Soll der Internet Explorer unterstützt werden, wird an dieser Stelle außerdem explorercanvas eingebunden.

<script src="qp_regular-polygons.js" type="text/javascript"></script>
<script src="explorercanvas.js" type="text/javascript"></script>

Inline-JavaScript

Im onload-Event des Dokuments oder sequentiell nach dem <canvas>-Element können die gewünschten Methoden zum Zeichnen oder zum Manipulieren der Füll- bzw. Linieneigenschaft aufgerufen werden (siehe: Quellcode zum Beispiel).

Schnittstelle

Das Objekt erwartet beim Aufruf eine ID, die ein <canvas>-Element eindeutig referenziert. Optional kann ein Options-Objekt übergeben werden.

qpPoly(id, [options])

Das Options-Objekt wird als JS-Objekt übergeben:

{opt_1: val_1, opt_2: val_2, ... , opt_n: val_n}

Optionen

Derzeit unterstützt das Objekt zwei Optionen.

  • w

    Breite des Canvas-Elements

    Datentyp: integer

  • h

    Höhe des Canvas-Elements

    Datentyp: integer

Methoden

Das Objekt stellt Methoden zum Zeichnen, sowie zum Manipulieren von Linien- und Fülleigenschaften zur Verfügung.

strokeZPoly

Zeichnet die Umfanglinie eines gezackten Vielecks.

qpPoly('id').strokeZPoly(x, y, r1, r2, n, phi)

Mit den Parametern:

x - Horizontale Koordinate des Mittelpunkts

y - Vertikale Koordinate des Mittelpunkts

r1 - Äußerer Radius

r2 - Innerer Radius

n - Anzahl der Spitzen

phi - Startwinkel, um den das Vieleck gedreht sein soll

fillZPoly

Zeichnet ein gefülltes gezacktes Vieleck.

qpPoly('id').fillZPoly(x, y, r1, r2, n, phi)

Mit den Parametern:

x - Horizontale Koordinate des Mittelpunkts

y - Vertikale Koordinate des Mittelpunkts

r1 - Äußerer Radius

r2 - Innerer Radius

n - Anzahl der Spitzen

phi - Startwinkel, um den das Vieleck gedreht sein soll

strokePoly

Zeichnet die Umfanglinie eines Vielecks.

qpPoly('id').strokeZPoly(x, y, r, n, phi)

Mit den Parametern:

x - Horizontale Koordinate des Mittelpunkts

y - Vertikale Koordinate des Mittelpunkts

r - Radius

n - Anzahl der Ecken

phi - Startwinkel, um den das Vieleck gedreht sein soll

fillPoly

Zeichnet ein gefülltes Vieleck.

qpPoly('id').fillZPoly(x, y, r, n, phi)

Mit den Parametern:

x - Horizontale Koordinate des Mittelpunkts

y - Vertikale Koordinate des Mittelpunkts

r - Radius

n - Anzahl der Ecken

phi - Startwinkel, um den das Vieleck gedreht sein soll

PolyGram

Zeichnet die Verbindungslinien eines Polygramms.

qpPoly('id').PolyGram(x, y, r, n, phi)

Mit den Parametern:

x - Horizontale Koordinate des Mittelpunkts

y - Vertikale Koordinate des Mittelpunkts

r - Radius

n - Anzahl der Spitzen

phi - Startwinkel, um den das Vieleck gedreht sein soll

fillStyle

Legt die Farbe zum Füllen einer Figur fest.

qpPoly('id').fillStyle(col)

Mit den Parametern:

col - Erwartet einen gültigen Farbstring (#rrggbb, #rgb, rgba(r,g,b,a))

strokeStyle

Legt die Linienfarbe fest.

qpPoly('id').strokeStyle(col)

Mit den Parametern:

col - Erwartet einen gültigen Farbstring (#rrggbb, #rgb, rgba(r,g,b,a))

Browserkompatibilität

Das Script wurde in folgenden Browsern erfolgreich getestet.

  • IE 5+
  • Firefox 1.5+
  • Opera 9+
  • Mozilla 1.5+
  • Safari (Win) 3+
  • Google Chrome
 
Dokument zuletzt modifiziert: 30.03.2011, 20:44 Uhr
<canvas>-Dokumentation Ver. 0.1 | Quaese, Jan 2008 | Datenschutz | Sitemap