Dokumentation (canvas.quaese.de)
 

Anwendungen - Runde Ecken

Das hier vorgestellte Script ermöglicht das Zeichnen von Rechtecken mit abgerundeten Ecken. Es stehen Routinen zum Erstellen gefüllter Elemente sowie zum Zeichnen von Umrisslinien zur Verfügung. Die Benutzung ist an die Methoden fillRect und strokeRect angelehnt.

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 zeigt einige Rechtecke mit runden Ecken.

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(){
  // Umrisslinie eines Rechtecks mit abgerundeten Ecken (Radius = 10) zeichnen
  qpCanvas({id: 'canvas_id'}).strokeStyle('rgba(255, 255, 255, 1)').lineWidth(3).strokeRoundRect(20, 20, 200, 100, {r: 10}).lineWidth(1);

  // Gefülltes Rechteck mit abgerundeten Ecken (Radius = 5) um 20 Grad um die linke obere Ecke gedreht zeichnen
  qpCanvas({id: 'canvas_id'}).fillStyle('rgba(251, 184, 56, 0.8)').fillRoundRect(60, 10, 100, 150, {r: 5, phi: 20});

  // Je fünf Quadrate (gefüllt und Umriss) mit abgerundeten Ecken um verschiedene Drehwinkel zeichnen
  var intAnz = 5;
  for(var i=0; i<intAnz; i++){
    qpCanvas({id: 'canvas_id'}).fillStyle('rgba('+ (251-i*10) + ', '+ (184-i*10) + ', '+ (56+i*10) + ', 1)').fillRoundRect(220, 220, 40, 40, {r: 8, phi: (0+i*360/intAnz)});
    qpCanvas({id: 'canvas_id'}).strokeStyle('#444').strokeRoundRect(220, 220, 40, 40, {r: 8, phi: (0+i*360/intAnz)});
  }
}

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 von Rechtecken mit abgerundeten Ecken 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_round-edges.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 ein Options-Objekt. In diesem muss eine ID übergeben werden, die ein <canvas>-Element eindeutig referenziert.

qpCanvas(options)

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

{id: (string)[,opt_1: val_1[, opt_2: val_2[, ... , opt_n: val_n]...]]}

Optionen

Das Objekt unterstützt die nachstehenden Optionen:

  • id

    Eindeutige ID, die ein <canvas>-Element referenziert.

    Datentyp: string

Methoden

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

strokeRoundRect

Zeichnet die Umfanglinie eines Rechtecks mit abgerundeten Ecken, deren Dimension über einen Radius angegeben werden.
Zudem kann das Element an der linken oberen Ecke um einen gewünschten Winkel phi gedreht werden.

qpCanvas('id').strokeRoundRect(x, y, w, h, {r: (integer), phi: (float)})

Mit den Parametern:

x - (integer) Horizontale Koordinate des Mittelpunkts

y - (integer) Vertikale Koordinate des Mittelpunkts

w - (integer) Breite des Rechtecks

h - (integer) Höhe des Rechtecks

more - (object) Objekt mit den nachstehenden Komponenten.

more.r - (integer) Radius der abgerundeten Ecken (optional, default: 0)

more.phi - (float) Winkel, um den um die linke obere Ecke gedreht wird (optional, default: 0)

fillRoundRect

Zeichnet ein gefülltes gezacktes Vieleck.

qpCanvas('id').fillRoundRect(x, y, w, h, {r: (integer), phi: (float)})

Mit den Parametern:

x - (integer) Horizontale Koordinate des Mittelpunkts

y - (integer) Vertikale Koordinate des Mittelpunkts

w - (integer) Breite des Rechtecks

h - (integer) Höhe des Rechtecks

more - (object) Objekt mit den nachstehenden Komponenten.

more.r - (integer) Radius der abgerundeten Ecken (optional, default: 0)

more.phi - (float) Winkel, um den um die linke obere Ecke gedreht wird (optional, default: 0)

fillStyle

Legt die Farbe zum Füllen einer Figur fest.

qpCanvas('id').fillStyle(col)

Mit den Parametern:

col - (string/object) Gültiger CSS-String zum Festlegen eines Farbwertes (#rrggbb, #rgb, rgba(r,g,b,a)) oder ein gültiges fill-Objekt (z.B. Gradient)

strokeStyle

Legt die Linienfarbe fest.

qpCanvas('id').strokeStyle(col)

Mit den Parametern:

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

lineWidth

Legt die Linienstärke fest.

qpCanvas('id').lineWidth(w)

Mit den Parametern:

w - (float) Breite der Linie

Browserkompatibilität

Das Script wurde in folgenden Browsern erfolgreich getestet.

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