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.
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.
Das Beispiel zeigt einige Rechtecke mit runden Ecken.
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)}); } }
Um korrekt zu funktionieren, müssen diverse Vorbereitungen getroffen werden. Diese werden nun beschrieben.
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.
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>
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).
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]...]]}
Das Objekt unterstützt die nachstehenden Optionen:
Eindeutige ID, die ein <canvas>
-Element referenziert.
Datentyp: string
Das Objekt stellt Methoden zum Zeichnen, sowie zum Manipulieren von Linien- und Fülleigenschaften zur Verfügung.
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:
Zeichnet ein gefülltes gezacktes Vieleck.
qpCanvas('id').fillRoundRect(x, y, w, h, {r: (integer), phi: (float)})
Mit den Parametern:
Legt die Farbe zum Füllen einer Figur fest.
qpCanvas('id').fillStyle(col)
Mit den Parametern:
Legt die Linienfarbe fest.
qpCanvas('id').strokeStyle(col)
Mit den Parametern:
Legt die Linienstärke fest.
qpCanvas('id').lineWidth(w)
Mit den Parametern:
Das Script wurde in folgenden Browsern erfolgreich getestet.