Das HTML5-Canvas-Tag bildet einen grafischen Device-Context. Zu einem Canvas-Bild wird ECMAScript-Code benötigt. Das Canvas-Tag wird das Bitmap-Bild direkt gerendert.
Es gibt z.B. die ECMAScript-Anweisungen arc, arcTo, beginPath, bezierCurveTo, clearRect, clip, closePath, drawImage, fill, fillRect, fillText, lineTo, moveTo, quadraticCurveTo, rect, restore, rotate, save, scale, setTransform, stroke, strokeRect, strokeText, transform, translate
Neben einer allgemeinen Kurzeinführung wird nachfolgend näher auf Canvas ( HTML5 und ECMAScript ) eingegangen.
In gewisser Weise entspricht die technische Sensorik beim Menschen die Sinneswahrnehmungen ( de.wikipedia ) . Dem menschlichen Sehvermögen entspricht ( zusätzlich ) einer "inneren Welt", die im Zusammenhang mit erfahrenen, visuell wiedererkennbaren Ähnlichkeitsereignissen "selbstähnlich" modifizieren kann. "Lebenserfahrung" kommt auch aus dem Erleben in wiederholt durchlaufenen Ähnlichkeitswahrnehmungen ( visuelle Reize → Transduktion → Verarbeitung → Wahrnehmung → Wiedererkennung → Handeln ). Den inneren Signal-Verarbeitungsprozessen bei Sehvorgängen entsprechen in gewisser Weise technischen "Renderprozessen".
Bildschirm-Bitmap-Grafiken und Vektorgrafiken gibt es seit den Anfängen der elektronischen Datenverarbeitung, siehe z.B. de.wikipedia Grafiksoftware.
Vektorgrafiken verwenden geometrische Grundformen (z.B. Punkte, Linien, Polygone, Formen ), die auf Vektoren basieren. Vektorgrafiken sind skalierbar. Dem Rendern von Vektorgrafik entspricht mit gewisser Ähnlichkeit das Rendern von Meta-Grafik-Datei-Formaten. SVG ( Scalable Vector Graphics ) ist eine 2D-XML-Sprache, die grafische Darstellungen in XML beschreibt. Seit etwa 2011 gibt es für SVG eine umfassende Browser-Unterstützung. SVG wird vermehrt im Internet eingesetzt.
Beispiel sind: Abbildungen wie Kurven, Diagramme und Karten. Ortsbezogene Beschriftungen, Organigramme, technische Zeichnungen, Konstruktionszeichnungen, Baupläne, Landkarten, biologische Diagramme, interaktive Aktienwebsites, Sitzpläne für Fluggesellschaften/Konzerthallen, Computerspiele.
Visualisierte Welten können auch mit technischen Mitteln mehr oder minder natürlich erscheinen. Die grafische Datenverarbeitung ist ein Gebiet der angewandten Informatik und wird unterteilt in
Visualisierungen hängen von den technischen Mitteln ( dem Anzeigegerät ) ab. Zu jedem digitale Gerät gehört die Auflösung. Bei einem Bildschirm wird die "kleinste ganzzahlige Einheit" Pixel genannt. Ein Pixel kann quatratisch oder auch rechteckig sein. Der Aspekt-Ratio meint das Höhen/Breitenverhältnis eines Pixels.
Zu einem Pixel gehört die Farbtiefe. Benutzt die innere Farb-Repräsentation eines Pixesl z.B. 3 Byte = 24 Bit, so kann ein Pixel eine von 2^24 = 16 777 216 unterschiedlichen Farben haben.
Zur Präsentation von Daten auf dem Bildschirm werden die Daten, wie z.B. Dokumenten-Content, Bitmaps, Bild-Farbebenen, usw. "gerendert". Durch die Ausführung der (Render-) Abbildungsvorschriften werden alle Pixel ( metrische Daten ) gesetzt. Das Rendern erzeugt aus elementaren Daten-Struktur-Elementen ( topologische Daten ) im Grafikspeicher die "Bitmap", die das optisch sichtbare Bild darstellt.
Bei True-Type-Fonts werden z.B. "grafische Vektoren" verwendet. Aus dem Anfangspunkt ( int x1, y1 ) und dem Endpunkt ( int x2, y2 ) werden mit dem Bresenham-Algorithmus die Zwischen-Pixel längs einer Linie berechnet. Wenn z.B. 10 000 Buchstaben gezeichnet werden und ein Buchstabe ca. 20 Polygonpunkte hat, so ergeben sich ca. 200 000 "grafische Vektoren", die das Bitmap-Schriftbild ergeben .
Ein Anwender von Software wird die Bedienung der Programme lernen und nutzen. App's haben oft einen kleinen Umfang und eine fachlich zentrierten ( engen ) Anwendungsbereich. Für eine Entwicklung von grafischer Software und ( mauszentrierten ) Applikationen sind die Bedienung des Endproduktes allein zu wenig. Entwicklungen haben mit System-Plattformen, Software-Bibliotheken, Entwicklungsumgebungen, Debuggern, Event-Verfolgungstools ( z.B. Spy ) und mehr! zu tun.
Bemerkungen: In Verbindung mit Cloud-Computing gibt es ( 2012 ) eine wachsende Zahl von Internet-basierten Anwendungen, die "grafische Generierungen" erfordern.
Einige Stichworte, die auf Einführendes und die Spannweite von Grafik verweisen, wie z.B. de.wikipedia Scalable Vector Graphics, Computergrafik, Grafikdesign , Logos, Vektorkunst, CD-Motiven, Postern, Graphische Kunst, Comics, Fraktale, Fraktale und Kunst, Lindenmayer-System, L-Systeme (Beiepiele), Google-SketchUp, Mediengestaltungen, Technische Zeichnung im Bauingenieurswesen und Maschinenbau, CAD beim rechnerunterstützten Zeichnen und Konstruieren, Statistik-Visualisierung, technischen Diagrammen, charts library, Landkarten, Stadtplänen, Flugblätter, Schriftzüge, elektronisches Dashboard (englisch für Armaturenbrett, Instrumententafel), usw.
Ein Wissen um die Bedienung von Grafik-Programmen ist für eine Entwicklung von mauszentrierter, grafischer Software ( Applikationsentwicklungen ) oft nicht hinreichend. Falls erforderlich, können/sollen Grafik-Kenntnissen aufgefrischt werden.
OpenGL (Open Graphics Library, 'Industriestandard', ca. 250 Befehle) ist eine plattform- und programmiersprachenunabhängige Programmierschnittstelle zur Entwicklung von 2D- und 3D-Computergrafik, die eine Nativ-Unterstützung von Harware erlaubt.
WebGL ist eine ( "abgespeckte" JavaScript-OpenGL- ) 3D-Grafik-Programmierschnittstelle, die 2012 noch nicht vom W3C standardisiert ist und 2012 nicht von allen wesentlichen Browsern unterstützt wird.
SVG (Scalable Vector Graphics, skalierbare Vektorgrafik) ist eine W3C Spezifikation für 2D-Vektorgrafiken ( XML basiert ). SVG wird 2012 ( mindestens IE 9 ) von den wesentlichen Webbrowsern unterstützt. SVG ist eine XML basierende Sprache, die skalierbaren Grafiken aus ASCII-Code rendert. SVG unterstützt CSS und ECMAScript. ECMAScript kann SVG-DOM nutzen. SMIL soll SVG-Animationen unterstützen.
Ein kleines, freies, plattformunabhängiges Programm zur Erstellung von Scalable Vector Graphics ist Inkscape ( Kofferwort aus engl. Tinte und Landschaft). Im Internet gibt es zahlreiche (meist kleinere) Anwendungen mit/für Vektor-Grafik
Für Grafik gibt es mehrere W3C-Standards ( siehe www.w3.org/TR/ ).
HTML5 ermöglicht die eingebettete Verwendung von Canvas-Elementen, die als Grafik-Flächen dienen. Eine "elektronische Zeichenfläche" wird engl. auch Canvas (Leinwand, Gewebe) genannt. Die Canvas-Unterstützung erfordert ECMAScript. Canvas bietet eine infache "nativ"-Schnittstelle (siehe z.B. w3.org 2d-context , whatwg: the-canvas-element , whatwg: beginPath() , en.wikipedia: Canvas_element ). Die Browser-Unterstützung zeigt en.wikipedia: Comparison_of_layout_engines_&HTML5_Canvas
Bei Software-Entwicklungen sind Geräte- und Hersteller-Unabhängigkeit wünschenswert. Leider geht dies unter realen Bedingungen nicht ohne weiteres ...
Ein modernes Betriebssystem verwaltet die Ereignisse und Daten von Fenstern ( Bildschirmbereiche ). Aus der Sicht des Betriebssystems entspricht dem grafische Devicekontext eine Teilmenge von (Verwaltungs- und Zustands-) Daten und Funktionen, die einem window zugeordnet sind. Zum grafischer Devicekontext gehören z.B. Hintergrundfarbe, Randbreite, Ausschnittgröße, Transparenz, aktuelle Fonttabelle, Titel, Hintergrundfarben, Strichstärken, Ränder, Abstände, Füllmuster, Bitmaps, usw.. Das Rendern (z.B. das Zeichnen von Vektoren ) braucht diese Daten-Grundmenge. Das Rendern meint einen komplexen Prozess, der aus strukturierten Daten die zugehörigen Bildschirm-Pixel geeignet setzt, die Buchstaben malt, das Bild darstellt.
Das Betriebssystem verwendet und benutzt den Device-Context z.B. für "liegt darunter", "gehört zu", "ist Teil von", "erbt von", "verwaltet andere", usw.. Es gibt System-Methoden ( Ereignisbehandlungen ), die dem Fenster ( Device-Context ) zugeordnet werden ( Caret-Position und Tastatur-Ereignisse, Maus-Ereignisse, Gesten ). Das Betriebssystem übernimmt ( mit Hilfe aktueller Gräte-Anpassungssoftware, Treiber ) die Behandlung der Ereignisse und die grundlegenden Renderoperationen. Eine moderne "Grafikkarte" bietet Harwareunterstützung an, wie z.B. 3D-Beschleuniger, 4x4 Matrizenopreationen für 3D-Transformationen, z-Tiefenbuffer für Objekt-Sichtbarkeiten.
Siehe auch: de.wikipedia Grafikkarte , Canvas_(HTML-Element) , en.wikipedia Context_(computing) , Graphics_Device_Interface
void pfeil() { glBegin( GL_POLYGON ); glVertex2d( -1,-1 ); glVertex2d( 1,-1 ); glVertex2d( 2, 0 ); glVertex2d( 1, 1 ); glVertex2d(-1, 1 ); glEnd(); } pfeil(); //schwarz glTranslated( 4.0, 0.0, 0.0 ); pfeil(); //grün glTranslated( 2.0, 3.0, 0.0 ); pfeil(); //magenta glRotated( 30.0, 0.0, 0.0, 1.0 ); pfeil(); //blau
Canvas ist ein 2D-Zeichnungs-API. Wesentlichen der Browser gibt Ihnen einen rectanglar Bereich auf dem Bildschirm, die Sie in schöpfen können. Sie können zeichnen Linien, Formen, Bilder, Text; ziemlich alles, was Sie wollen. Canvas wurde ursprünglich von Apple für seine Dashboard-Widgets erstellt, aber es wurde seitdem von allen wichtigen Browser Lieferanten übernommen und ist nun Teil der HTML-5-Spezifikation.
Obwohl Canvas2DContext leichtgewichtig gegnüber WebGL, OpenGL, Silverlight ist, so gibt es doch nützliche Funktionen und Properties, wie z.B. ctx.translate(), ctx.translate(), ctx.scale(), ctx.createLinearGradient(), ctx.createRadialGradient() und shadowOffsetX, shadowOffsetY, shadowBlur, shadowColor.
Canvas2DContext hat u.a. Funktionen für 'arc','arcTo','beginPath','bezierCurveTo','clearRect','clip', 'closePath','drawImage','fill','fillRect','fillText','lineTo','moveTo', 'quadraticCurveTo','rect','restore','rotate','save','scale','setTransform', 'stroke','strokeRect','strokeText','transform','translate' und Properties, wie z.B. 'canvas','fillStyle','font','globalAlpha','globalCompositeOperation', 'lineCap','lineJoin','lineWidth','miterLimit', 'shadowOffsetX','shadowOffsetY', 'shadowBlur','shadowColor', 'strokeStyle','textAlign','textBaseline'
translate(tx, ty) entspricht transform( 1, 0, 0, 1, tx, ty) scale(sx, sy) entspricht transform(sx, 0, 0, sy, 0, 0) rotate(w) entspricht transform( c, s,-s, c, 0, 0) mit c=Math.cos(w), s=Math.sin(w)
c=Math.cos(w), s=Math.sin(w)
: Verschiebt alles, was nach dem Aufrufen von translate gezeichnet wird, um die angegebenen Koordinaten. Dies bedeutet, dass allen folgenden x-Koordinaten der Wert
tx bzw. allen y-Koordinaten ty hinzuaddiert wird. Wird die Funktion mehrmals aufgerufen, so werden die einzelnen tx bzw. ty addiert. Der Funktionsaufruf ist identisch mit
.
rotate(w)
: Rotiert alles, was nach dem Aufrufen von rotate gezeichnet wird, im Uhrzeigesinn um den hinterlegten Winkel; als Rotationszentrum wird dabei der (evtl. durch translate verschobene) Punkt (0 | 0) angenommen. Berücksichtigen Sie, dass der Winkel in der Einheit rad interpretiert wird (seine Angabe erfolgt jedoch als Float-Wert, nicht als CSS-String). Wird die Funktion mehrmals aufgerufen, so werden die einzelnen w addiert. Der Funktionsaufruf ist identisch mit transform(Math.cos(w), Math.sin(w), -Math.sin(w), Math.cos(w), 0, 0).
scale(kx, ky)
: Multipliziert alle x-, y-, width- und height-Angaben, die nach dem Aufrufen von scale den Context-Funktionen übergeben werden. Dabei wird kx mit den x- und width-Angaben, ky mit den y- und height-Angaben multipliziert. Die resultierenden Zeichnungen wirken nach Verwendung von scale (zentrisch) gestreckt. Wird die Funktion mehrmals aufgerufen, so werden die einzelnen kx bzw. ky miteinander multipliziert. Der Funktionsaufruf ist identisch mit transform(kx, 0, 0, ky, 0, 0).
setTransform(a, b, c, d, e, f)
: Löscht alle aktiven Translationen, Rotationen sowie Skalierungen und setzt die Transformationsmatrix auf die übergebenen Werte. Dabei haben a und d den gleichen Effekt wie kx und ky bei scale; die Werte e und f sind mit tx und ty von translate identisch. Mithilfe des Wertes c wird der x-Koordinate das c-Fache der y-Koordinate hinzuaddiert (das Umgekehrte gilt entsprechend für d). Sind die Werte a, b, c und d in spezieller Relation zueinander (z.B. über trigonometrische Funktionen wie sin und cos), wirkt das transformierte Bild rotiert, andernfalls in verschiedenster Weise verzerrt, z.B. erscheinen Rechtecke plötzlich wie Parallelogramme (mehr Informationen zu diesen sogenannten Scherungsfaktoren siehe Weblinks).
setTransform(a, b, c, d, e, f) aneu = aalt * a + calt * b (entspricht neuem x-Skalierungswert) bneu = balt * a + dalt * b (entspricht neuer y-Scherung) cneu = aalt * c + calt * d (entspricht neuer x-Scherung) dneu = balt * c + dalt * d (entspricht neuem y-Skalierungswert) eneu = aalt * e + calt * f + ealt (entspricht neuer x-Verschiebung) fneu = balt * e + dalt * f + falt (entspricht neuer y-Verschiebung)
<canvas id="myCanvas" width="500" height="300"> Kein Canvas </canvas>
2d/3d-Context
var ctx = canvas.getContext('2d'); var ctx = canvas.getContext('webgl');
Shapes ( Draw rectangle )
ctx.rect(x, y, width, height); ctx.fill(); ctx.stroke();
Shapes ( Fill rectangle shorthand )
ctx.fillRect(x, y, width, height);
Shapes ( Stroke rectangle shorthand )
ctx.strokeRect(x, y, width, height);
Shapes ( Draw circle )
ctx.arc(x, y, r, 0, Math.PI * 2); ctx.fill(); ctx.stroke();
Styles ( Fill )
ctx.fillStyle = 'red'; ctx.fill();
Styles ( Stroke )
ctx.strokeStyle = 'red'; ctx.stroke();
Styles ( Linear gradient )
var grd = ctx.createLinearGradient(x1, y1, x2, y2); grd.addColorStop(0, 'red'); grd.addColorStop(1, 'blue'); ctx.fillStyle = grd; ctx.fill();
Styles ( Radial gradient )
var grd = ctx.createRadialGradient(x1, y1, r1, x2, y2, r2); grd.addColorStop(0, 'red'); grd.addColorStop(1, 'blue'); ctx.fillStyle = grd; ctx.fill();
Styles ( Pattern )
var img = new Image(); img.onload = function() { var pattern = ctx.createPattern(img, 'repeat'); ctx.fillStyle = pattern; ctx.fill(); }; img.src = 'path/to/my/image.jpg';
Styles ( Line Join )
ctx.lineJoin = 'miter|round|bevel';
Styles ( Line Cap )
ctx.lineCap = 'butt|round|square';
Styles ( Shadow )
ctx.shadowColor = 'black'; ctx.shadowBlur = 20; ctx.shadowOffsetX = 10; ctx.shadowOffsetY = 10;
Styles ( Alpha = Opacity )
ctx.globalAlpha = 0.5; // between 0 and 1
Color Formats
ctx.fillStyle = 'red'; ctx.fillStyle = '#ff0000'; ctx.fillStyle = '#f00'; ctx.fillStyle = 'rgb(255,0,0)'; ctx.fillStyle = 'rgba(255,0,0,1)';
Begin Path
ctx.beginPath();
Line
ctx.lineTo(x, y);
Arc
ctx.arc(x, y, r, startAngle, endAngle, counterClockwise); ctx.arc(x, y, r, 0, Math.PI * 2); ctx.fill(); ctx.stroke();
Quadratic curve
ctx.quadraticCurveTo(cx, cy, x, y);
Bezier curve
ctx.bezierCurveTo(cx1, cy1, cx2, cy2, x, y);
Close Path
ctx.closePath();
Fill Text
ctx.font = '40px Arial'; ctx.fillStyle = 'red'; ctx.fillText('Hello World!', x, y);
Stroke Text
ctx.font = '40pt Arial'; ctx.strokeStyle = 'red'; ctx.strokeText('Hello World!', x, y);
Bold Text
ctx.font = 'bold 40px Arial';
Italic Text
ctx.font = 'italic 40px Arial';
Text Align
ctx.textAlign = 'start|end|left|center|right';
Text Baseline
ctx.textBaseline = 'top|hanging|middle|alphabetic|ideographic |bottom';
Get Text Width
var width = ctx.measureText('Hello world').width;
ctx.translate(x, y); // Verschieben ctx.scale(x, y); // Skalieren ctx.rotate(radians); // Rotieren ctx.scale(-1, 1); // Flip Horizontal ctx.scale(1, -1); // Flip Vertikal
Custom Transformationen
ctx.setTransform(a, b, c, d ,e, f); ctx.setTransform(1, 0, 0, 1, 0, 0);// Reset ctx.transform(1, sy, sx, 1, 0, 0); // Scherung
ctx.save(); // Push ctx.restore(); // Pop
// draw path here ctx.clip();
Draw Image ( mit default size )
var img = new Image(); img.onload = function() { ctx.drawImage(img, x, y); }; img.src = 'path/to/my/image.jpg';
Draw image ( mit set size )
var img = new Image(); img.onload = function() { ctx.drawImage(img, x, y, width, height); }; img.src = 'path/to/my/image.jpg';
Crop image
var img = new Image(); img.onload = function() { ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh); }; img.src = 'path/to/my/image.jpg';
var img = ctx.getImageData(x,y, width,height); var data = img.data; var len = data.length; var i, red, green, blue, alpha; for(i = 0; i < len; i += 4) { red = data[i]; green = data[i + 1]; blue = data[i + 2]; alpha = data[i + 3]; }
Loop: Image Pixels mit Koordinaten
var img = ctx.getImageData(x, y, width, height); var data = img.data; var x, y, red, green, blue, alpha; for(y = 0; y < imageHeight; y++) { for(x = 0; x < imageWidth; x++) { red = data[((imageWidth * y) + x) * 4]; green = data[((imageWidth * y) + x) * 4 + 1]; blue = data[((imageWidth * y) + x) * 4 + 2]; alpha = data[((imageWidth * y) + x) * 4 + 3]; } }
Set Image Data
ctx.putImageData(img_data, x, y);
Get Data URL
var dataURL = canvas.toDataURL();
Render Canvas with Data URL
var img = new Image(); img.onload = function() { ctx.drawImage(img, 0, 0); }; img.src = dataURL;
Composite Operations
ctx.globalCompositeOperation = 'source-atop |source-in|source-out|source-over |destination-atop|destination-in |destination-out|destination-over |lighter|xor|copy'; rect(x, y, width, height); ctx.fill(); ctx.stroke(); //shorthand fill: ctx.fillRect(x, y, width, height); // shorthand stroke: ctx.strokeRect(x, y, width, height);
Draw circle
ctx.arc(x, y, r, 0, Math.PI * 2); ctx.fill(); ctx.stroke();
ctx.fillStyle = 'red'; ctx.fillStyle = '#ff0000'; ctx.fillStyle = '#f00'; ctx.fillStyle = 'rgb(255,0,0)'; ctx.fillStyle = 'rgba(255,0,0,1)';
ctx.beginPath();
ctx.lineTo(x, y); ctx.arc(x, y, r, startAngle, endAngle, counterClockwise); ctx.quadraticCurveTo(cx, cy, x, y); ctx.bezierCurveTo(cx1, cy1, cx2, cy2, x, y);
ctx.closePath();
Draw image ( set size )
var img = new Image(); img.onload = function() { ctx.drawImage(img, x, y); ctx.drawImage(img, x, y, width, height); }; img.src = 'path/to/my/image.jpg';
Crop image
var img = new Image(); img.onload = function() { ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh); }; img.src = 'path/to/my/image.jpg';
Fill Text
ctx.font = '40px Arial'; ctx.fillStyle = 'red'; ctx.fillText('Hallo Welt!', x, y);
Stroke Text
ctx.font = '40pt Arial'; ctx.strokeStyle = 'red'; ctx.strokeText('Hello World!', x, y);
Bold Text
ctx.font = 'bold 40px Arial';
Italic Text
ctx.font = 'italic 40px Arial';
Text Align
ctx.textAlign = 'start|end|left|center|right';
Text Baseline
ctx.textBaseline = 'top|hanging|middle|alphabetic|ideographic |bottom';
Get Image Data
var imageData = ctx.getImageData(x, y, width, height); var data = imageData.data;
Loop Through Image Pixels
var imageData = ctx.getImageData(x, y, width, height); var data = imageData.data; var len = data.length; var i, red, green, blue, alpha; for(i = 0; i < len; i += 4) { red = data[i]; green = data[i + 1]; blue = data[i + 2]; alpha = data[i + 3]; }
Loop Through Image Pixels With Coordinates
var imageData = ctx.getImageData(x, y, width, height); var data = imageData.data; var x, y, red, green, blue, alpha; for(y = 0; y < imageHeight; y++) { for(x = 0; x < imageWidth; x++) { red = data[((imageWidth * y) + x) * 4]; green = data[((imageWidth * y) + x) * 4 + 1]; blue = data[((imageWidth * y) + x) * 4 + 2]; alpha = data[((imageWidth * y) + x) * 4 + 3]; } }
Set Image Data
ctx.putImageData(imageData, x, y);
Get Data URL
var dataURL = canvas.toDataURL();
Render Canvas with Data URL
var img = new Image(); img.onload = function() { ctx.drawImage(img, 0, 0); }; img.src = dataURL;
Der ECMAScript-Canvas-Quelltext des Bildes befindet sich im HTML-Quelltex der Seite.
|
Hier ist ein Demo- Beispiel, wie Canvas-Funktionalitäten auf Strukturierte-Daten abgebildet werden können. Das Rendern der Daten soll im wesentlichen durch eine Funktion draw_shape(obj) erfolgen. Die Properties von obj steuern die Canvas-Funktionen. Weil die Formulare i.a. Strings bereit stellen, ist es günstig, auch die "render-steuernden-Daten" überwiegend mit (diesen) Strings aufzubauen.
// Beipiel für eine ctx.save()-ctx.restore()-Klammerung // 't 20 0' bewirkt ctx.translate(20,0) // 'r 15 200 200' bewirkt ctx.rotate(Math.PI / 180) * 15) um den Punkt (200,200) // 'push' bewirkt ctx.save(); // 'pop' bewirkt ctx.restore(); draw_shape({id:'canvas0',transf:'t 20 0|r 15 200 200 |push'}); // ... mehrere Figuren werden gedreht ... draw_shape({id:'canvas0',transf:'pop'});
Hinweise zu den Bezeichnern:
c_ steht für das Wort "Canvas"
f_ steht für das Wort "Figur"
name: steht für die Bezeichnung des Objektes
mod: steht für den auszuführenden Rendervorgang
ij: steht für eine Folge von x-y-Gerätekoordinaten, die in einem String sind
Wie kann eine ebene Figur auf ein Objekt abgebildet werden?
// Beipiel für ein Objekt o1 var o1 = { name : '3 grüne schräge Linien', mod : 'LINES', // Folge von einzelnen Linien ij : '200 140 100 240 220 140 120 240 240 140 140 240', id : id, // Canvas-Idetifizierer ctx : ctx, // Canvas-Context ctx_width : ctx.canvas.width, ctx_height : ctx.canvas.height, fill_style : '#999', stroke_style: '#0f0', stroke_width: '5', shadow_style: '5 5 4 rgba(55,0,0,0.5)' // i j blur col };
Hier ist ein Demo-Beispiel, wie Canvas-Funktionalitäten auf Strukturierte-Daten abgebildet werden können.
<script> // Beispiele var ctx = document.getElementById("ID_SCHATTEN").getContext("2d"); if (!ctx) { alert("ERR: Canvas-Element id=???"); } // Hintergrund: ctx.fillStyle = "rgb(192,192,192)"; ctx.fillRect(0, 0, 300, 300); // Rechteck ohne Schatten ctx.strokeStyle = "#009"; ctx.lineWidth = "12"; ctx.strokeRect(20, 20, 60, 120); // Vector: ctx.beginPath(); ctx.moveTo(160, 80); ctx.lineTo(260, 180); ctx.closePath(); ctx.lineWidth = 1; ctx.stroke(); // Halbkreis ctx.beginPath(); ctx.arc(195, 190, 50, 0.25 * Math.PI, 1.25 * Math.PI); ctx.closePath(); ctx.lineWidth = "20"; ctx.fillStyle = "#0f0"; ctx.strokeStyle = "#0a0"; ctx.fill(); ctx.stroke(); // Dreieck: ctx.fillStyle = '#f00'; ctx.lineWidth = '5'; ctx.strokeStyle = '#400'; ctx.beginPath(); ctx.moveTo(160, 20); ctx.lineTo(260, 120); ctx.lineTo(260, 20); ctx.closePath(); ctx.fill(); ctx.stroke(); // Rechteck mit Schatten: ctx.strokeStyle = "#009"; ctx.lineWidth = "12"; ctx.shadowOffsetX = "5"; ctx.shadowOffsetY = "2"; ctx.shadowBlur = "8"; ctx.shadowColor = "#000"; ctx.strokeRect(20, 160, 60, 120); </script>