HTML5-Canvas Grundlagen Einführendes

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.


Visuelle Sinneswahrnehmungen Mensch - Technik

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 .


Grundlagen der Computergrafik Externe Weblinks

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.


Weblinks zu OpenGL, WebGL, SVG Grundlagen, Externe Weblinks

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 und Canvas Grundlagen, Externe Weblinks

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

Grafischer Devicekontext Was ist das?

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


Canvas ( 2D-Zeichnungs-API ) Func/Prop-Übersicht

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' 


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-Code-Einführung HTML5
HTML5 canvas-Element
<canvas id="myCanvas" width="500" height="300">
  Kein Canvas
</canvas>

2d/3d-Context

var ctx = canvas.getContext('2d');
var ctx = canvas.getContext('webgl');

Shapes

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, Stroke, Gradient, Pattern, Join, Cap)

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

Farben ( Schreibweise )

Color Formats

ctx.fillStyle = 'red';
ctx.fillStyle = '#ff0000';
ctx.fillStyle = '#f00';
ctx.fillStyle = 'rgb(255,0,0)';
ctx.fillStyle = 'rgba(255,0,0,1)';

Path ( Line, Arc, bezierCurve, quadraticCurve )

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();

Texte ( fillText, strokeText, Bold, Italic, Align, Width )

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;

Transformationen ( translate, scale,rotate, transform )
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

Stack Operationen ( save, restore )
ctx.save();    // Push
ctx.restore(); // Pop

Clipping ( Begrenzen )
// draw path here
ctx.clip();

Images ( onload, draw, crop )

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';

Image Data ( Loop: Image Pixel )
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);

Data URLs

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;

Composites

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();

Color Formate
ctx.fillStyle = 'red';
ctx.fillStyle = '#ff0000';
ctx.fillStyle = '#f00';
ctx.fillStyle = 'rgb(255,0,0)';
ctx.fillStyle = 'rgba(255,0,0,1)';

Paths
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(); 

Images

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';

Text

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';

Image Data

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);

Data URLs

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;



Beispiel: Canvas ( Grafik-Generieren ) Zeichnen mit Javascript

Der ECMAScript-Canvas-Quelltext des Bildes befindet sich im HTML-Quelltex der Seite.

Browser kann kein Canvas
  • Verwende ein Canvas-Tag, etwa:
    <canvas id="..." width="300" height="300">
     no Browser-Canvas
    </canvas>
    
  • Das Canvas-Device-Kontext-Objekt ctx ergibt sich mit
    var ctx = document.getElementById("...").getContext("2d");
  • Setze Hintergrund etwa:
     ctx.fillStyle = "rgb(192,192,192)";
     ctx.fillRect(0, 0, 300, 300);
    
    Zeichne gefülltes Rechteck mit Linien-Rand, etwa:
     ctx.strokeStyle = "#009";
     ctx.lineWidth = "12";
     ctx.strokeRect(20, 20, 60, 120);
    
    Canvas unterstützt nur "rectangle shapes" direkt, d.h. bei rect-Funktionen kann auf die Klammerung mit
    ctx.beginPath(); ... ctx.closePath();
    verzichtet werden.
  • Zeichne einen Vector, etwa:
    ctx.beginPath();
      ctx.moveTo(160, 80);
      ctx.lineTo(260, 180);
    ctx.closePath(); ctx.lineWidth = 1; ctx.stroke();
    Zum Füllen eines geschlossenen Polygons wird auch
    ... ctx.fillStyle = '#f00'; ctx.fill();
    verwendet.
Beispiel: Canvas ( ECMAScript-Code ) draw_shape(o)

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>