From 4ab365b110f2f1f2b736326b7059244a32115089 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:45:38 +0100 Subject: unslug de: move --- .../canvas_tutorial/advanced_animations/index.html | 380 ---------- .../applying_styles_and_colors/index.html | 785 --------------------- .../canvas_tutorial/basic_animations/index.html | 307 -------- .../guide/html/canvas_tutorial/bilder/index.html | 324 --------- .../canvas_tutorial/canvas_optimieren/index.html | 118 ---- .../html/canvas_tutorial/drawing_text/index.html | 165 ----- .../canvas_tutorial/formen_zeichnen/index.html | 453 ------------ .../html/canvas_tutorial/grundlagen/index.html | 154 ---- files/de/web/guide/html/canvas_tutorial/index.html | 51 -- .../web/guide/html/content_categories/index.html | 153 ++++ .../de/web/guide/html/content_editable/index.html | 52 -- .../de/web/guide/html/editable_content/index.html | 52 ++ files/de/web/guide/html/html5/index.html | 174 +++++ .../de/web/guide/html/inhaltskategorien/index.html | 153 ---- .../index.html | 351 --------- .../using_html_sections_and_outlines/index.html | 351 +++++++++ 16 files changed, 730 insertions(+), 3293 deletions(-) delete mode 100644 files/de/web/guide/html/canvas_tutorial/advanced_animations/index.html delete mode 100644 files/de/web/guide/html/canvas_tutorial/applying_styles_and_colors/index.html delete mode 100644 files/de/web/guide/html/canvas_tutorial/basic_animations/index.html delete mode 100644 files/de/web/guide/html/canvas_tutorial/bilder/index.html delete mode 100644 files/de/web/guide/html/canvas_tutorial/canvas_optimieren/index.html delete mode 100644 files/de/web/guide/html/canvas_tutorial/drawing_text/index.html delete mode 100644 files/de/web/guide/html/canvas_tutorial/formen_zeichnen/index.html delete mode 100644 files/de/web/guide/html/canvas_tutorial/grundlagen/index.html delete mode 100644 files/de/web/guide/html/canvas_tutorial/index.html create mode 100644 files/de/web/guide/html/content_categories/index.html delete mode 100644 files/de/web/guide/html/content_editable/index.html create mode 100644 files/de/web/guide/html/editable_content/index.html create mode 100644 files/de/web/guide/html/html5/index.html delete mode 100644 files/de/web/guide/html/inhaltskategorien/index.html delete mode 100644 files/de/web/guide/html/sections_and_outlines_of_an_html5_document/index.html create mode 100644 files/de/web/guide/html/using_html_sections_and_outlines/index.html (limited to 'files/de/web/guide/html') diff --git a/files/de/web/guide/html/canvas_tutorial/advanced_animations/index.html b/files/de/web/guide/html/canvas_tutorial/advanced_animations/index.html deleted file mode 100644 index 10c4a7650c..0000000000 --- a/files/de/web/guide/html/canvas_tutorial/advanced_animations/index.html +++ /dev/null @@ -1,380 +0,0 @@ ---- -title: Fortgeschrittene Animationen -slug: Web/Guide/HTML/Canvas_Tutorial/Advanced_animations -tags: - - Canvas - - Graphics - - Tutoria -translation_of: Web/API/Canvas_API/Tutorial/Advanced_animations ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}
- -
-

In dem vorherigem Kapitel machten wir einige Basisanimationen und lernten Möglichkeiten, Dinge zu bewegen. In diesem Kapitel werden wir uns die Bewegung selbst anschauen und werden etwas Physik einfügen um unsere Animationen fortgeschrittener zu machen.

-
- -

Einen Ball zeichnen

- -

Wir werden einen Ball für unsere Animationen benutzen, deshalb zeichnen wir zuerst einen Ball mit dem folgendem Code in die Canvas.

- -
<canvas id="canvas" width="600" height="300"></canvas>
-
- -

Wie gewöhnlich brauchen wir zuerst ein draw context. Um den Ball zu zeichnen, werden wir ein ball - Objekt erstellen, welches Eigenschaften und eine draw() - Methode enthält, um es in die Canvas zu zeichnen.

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-
-var ball = {
-  x: 100,
-  y: 100,
-  radius: 25,
-  color: 'blue',
-  draw: function() {
-    ctx.beginPath();
-    ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true);
-    ctx.closePath();
-    ctx.fillStyle = this.color;
-    ctx.fill();
-  }
-};
-
-ball.draw();
- -

Nichts Besonderes hier, der Ball ist momentan ein einfacher Kreis und wird mit der {{domxref("CanvasRenderingContext2D.arc()", "arc()")}} - Methode gezeichnet.

- -

Geschwindigkeit hinzufügen

- -

Nun haben wir einen Ball und sind bereit, eine Basisanimation hinzuzufügen, wie wir es im vorherigen Kapitel von diesem Tutorial lernten. Wieder hilft uns {{domxref("window.requestAnimationFrame()")}}, die Animation zu kontrollieren. Der Ball bewegt sich durch Hinzufügen von einem Geschwindigkeitsvektor zu der Position. Für jedes Frame {{domxref("CanvasRenderingContext2D.clearRect", "clean", "", 1)}} wir die Canvas, um alte Kreise zu entfernen.

- -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-var raf;
-
-var ball = {
-  x: 100,
-  y: 100,
-  vx: 5,
-  vy: 2,
-  radius: 25,
-  color: 'blue',
-  draw: function() {
-    ctx.beginPath();
-    ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true);
-    ctx.closePath();
-    ctx.fillStyle = this.color;
-    ctx.fill();
-  }
-};
-
-function draw() {
-  ctx.clearRect(0,0, canvas.width, canvas.height);
-  ball.draw();
-  ball.x += ball.vx;
-  ball.y += ball.vy;
-  raf = window.requestAnimationFrame(draw);
-}
-
-canvas.addEventListener('mouseover', function(e){
-  raf = window.requestAnimationFrame(draw);
-});
-
-canvas.addEventListener("mouseout",function(e){
-  window.cancelAnimationFrame(raf);
-});
-
-ball.draw();
-
- -

Gebundenheit

- -

Ohne jede gebundene Kollisionsüberprüfung fliegt unser Ball schnell aus dem Canvas. Wir müssen die x - und yposition von dem Ball überprüfen und wenn der Ball außerhalb des Canvas ist, die Richtung der Geschwindigkeitsvektoren umkehren.

- -
if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
-  ball.vy = -ball.vy;
-}
-if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
-  ball.vx = -ball.vx;
-}
- -

Erste Demo

- -

Lass uns sehen, wie das in Aktion aussieht. Bewegen Sie die Maus in die Canvas, um die Animation zu starten.

- - - -

{{EmbedLiveSample("Erste_Demo", "610", "310")}}

- -

Acceleration

- -

Um die Bewegung realistischer zu machen, können Sie mit Geschwindigkeit spielen, zum Beispiel:

- -
ball.vy *= .99;
-ball.vy += .25;
- -

Dies verlangsamt die vertikale Geschwindigkeit in jedem Frame, sodass der Ball am Ende nur noch am Boden hüpft.

- - - -

{{EmbedLiveSample("Acceleration", "610", "310")}}

- -

Spureneffekt

- -

Bis jetzt haben wir die {{domxref("CanvasRenderingContext2D.clearRect", "clearRect")}}  - Methode benutzt, wenn wir Frames clearten. Wenn Sie diese Methode durch {{domxref("CanvasRenderingContext2D.fillRect", "fillRect")}} ersetzen, können Sie einfach einen Spureneffekt erzeugen.

- -
ctx.fillStyle = 'rgba(255,255,255,0.3)';
-ctx.fillRect(0,0,canvas.width,canvas.height);
- - - -

{{EmbedLiveSample("Spureneffekt", "610", "310")}}

- -

Mauskontrolle hinzufügen

- -

Um etwas Kontrolle über den Ball zu bekommen, können wir machen, dass er die Maus verfolgt, indem wir beispielsweise das mousemove - Ereignis benutzen. Das click - Ereignis lässt den Ball wieder hüpfen.

- - - -
var canvas = document.getElementById('canvas');
-var ctx = canvas.getContext('2d');
-var raf;
-var running = false;
-
-var ball = {
-  x: 100,
-  y: 100,
-  vx: 5,
-  vy: 1,
-  radius: 25,
-  color: 'blue',
-  draw: function() {
-    ctx.beginPath();
-    ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true);
-    ctx.closePath();
-    ctx.fillStyle = this.color;
-    ctx.fill();
-  }
-};
-
-function clear() {
-  ctx.fillStyle = 'rgba(255,255,255,0.3)';
-  ctx.fillRect(0,0,canvas.width,canvas.height);
-}
-
-function draw() {
-  clear();
-  ball.draw();
-  ball.x += ball.vx;
-  ball.y += ball.vy;
-
-  if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
-    ball.vy = -ball.vy;
-  }
-  if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
-    ball.vx = -ball.vx;
-  }
-
-  raf = window.requestAnimationFrame(draw);
-}
-
-canvas.addEventListener('mousemove', function(e){
-  if (!running) {
-    clear();
-    ball.x = e.clientX;
-    ball.y = e.clientY;
-    ball.draw();
-  }
-});
-
-canvas.addEventListener("click",function(e){
-  if (!running) {
-    raf = window.requestAnimationFrame(draw);
-    running = true;
-  }
-});
-
-canvas.addEventListener("mouseout",function(e){
-  window.cancelAnimationFrame(raf);
-  running = false;
-});
-
-ball.draw();
-
- -

Bewegen Sie den Ball mit der Maus und klicken Sie, um ihn loszulassen.

- -

{{EmbedLiveSample("Mauskontrolle_hinzuf%C3%BCgen", "610", "310")}}

- -

Breakout

- -

Dieses kurze Kapitel erklärt nur einige Möglichkeiten, fortgeschrittene Animationen zu erstellen. Es gibt viel mehr! Was darüber, ein Brett und einige Blöcke hizuzufügen und diese Demo in ein Breakout - Spiel zu verwandeln? Schauen Sie sich unseren Spieleentwickelungsbereich an für mehr auf Spiele bezogene Artikel.

- -

Siehe auch

- - - -

{{PreviousNext("Web/API/Canvas_API/Tutorial/Basic_animations", "Web/API/Canvas_API/Tutorial/Pixel_manipulation_with_canvas")}}

diff --git a/files/de/web/guide/html/canvas_tutorial/applying_styles_and_colors/index.html b/files/de/web/guide/html/canvas_tutorial/applying_styles_and_colors/index.html deleted file mode 100644 index 6caa27b3ef..0000000000 --- a/files/de/web/guide/html/canvas_tutorial/applying_styles_and_colors/index.html +++ /dev/null @@ -1,785 +0,0 @@ ---- -title: Stile und Farben verwenden -slug: Web/Guide/HTML/Canvas_Tutorial/Applying_styles_and_colors -translation_of: Web/API/Canvas_API/Tutorial/Applying_styles_and_colors ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}
- -
-

Im Kapitel über das Zeichnen von Formen haben wir zum Einstieg nur die Standard-Stile für Linien und Füllungen benutzt. Nun möchten wir uns etwas näher mit Möglichkeiten beschäftigen, unsere Zeichnungen etwas attraktiver zu gestalten. Wir werden lernen, unterschiedliche Farben, Linienstile, Verläufe, Muster und Schatten in unseren Zeichnungen anzuwenden.

-
- -

Farben

- -

Bis jetzt haben wir nur Methoden im unmittelbaren Zusammenhang mit dem Zeichnen gelernt. Möchten wir einer Form eine Farbe zuordnen, stehen uns folgenden zwei Eigenschaften zur Verfügung: fillStyle und strokeStyle.

- -
-
{{domxref("CanvasRenderingContext2D.fillStyle", "fillStyle = color")}}
-
-

 Bestimmt den Stil in dem die Form gefüllt wird.

-
-
{{domxref("CanvasRenderingContext2D.strokeStyle", "strokeStyle = color")}}
-
-

Bestimmt den Stil der Umrandungslinien.

-
-
- -

color steht entweder für einen CSS {{cssxref("<color>")}} Farbwert, ein Gradienten-Objekt, oder ein Muster-Objekt. Auf letztere gehen wir später noch ein. Standardmäßig sind Strich- und Füllfarbe auf Schwarz eingestellt (CSS-Farbwert #000000).

- -
-

Anmerkung: Nach dem Setzen von strokeStyle und/oder fillStyle wird der neue Wert zum Standardwert für alle nachfolgend gezeichneten Formen. Für jede in einer abweichenden Farbe gewünschte Form müssen fillStyle bzw. strokeStyle neu definiert werden.

-
- -

Der String color sollte, entsprechend der Spezifikation, ein gültiger CSS {{cssxref("<color>")}} -Wert sein. Alle folgenden Beispiele definieren die selbe Farbe.

- -
// these all set the fillStyle to 'orange'
-
-ctx.fillStyle = "orange";
-ctx.fillStyle = "#FFA500";
-ctx.fillStyle = "rgb(255,165,0)";
-ctx.fillStyle = "rgba(255,165,0,1)";
-
- -

Beispiel für fillStyle

- -

In diesem Beispiel nutzen wir wieder zwei Schleifen um ein Gitter aus gefüllten Quadraten zu zeichnen, jedes in einer anderen Farbe. Das resultierende Bild sollte etwa dem Screenshot unten entsprechen. Außergewöhnliches passiert hier nicht, wir nutzen einfach die beiden Variablen i und j um jedem Quadrat eine eigene Farbe zu geben, wobei wir nur die Werte für den Rot- und Grünanteil ändern; der Blauwert bleibt unverändert. Durch Modifikation der Farbkanäle können Sie verschiedene Paletten erzeugen; eine Erhöhung der Schrittweite erzeugt z.B. ein Muster, das an die Farbpaletten in Photoshop erinnert.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  for (var i=0;i<6;i++){
-    for (var j=0;j<6;j++){
-      ctx.fillStyle = 'rgb(' + Math.floor(255-42.5*i) + ',' +
-                       Math.floor(255-42.5*j) + ',0)';
-      ctx.fillRect(j*25,i*25,25,25);
-    }
-  }
-}
- - - -

Das Ergebnis:

- -

{{EmbedLiveSample("A_fillStyle_example", 160, 160, "https://mdn.mozillademos.org/files/5417/Canvas_fillstyle.png")}}

- -

Beispiel für strokeStyle

- -

Dieses Beispiel ähnelt dem vorangegangenen, nutzt aber die strokeStyle Eigenschaft, um die Farben der Umrisslinien zu ändern. Mit der Methode arc() zeichnen wir Kreise an Stelle der Quadrate.

- -
  function draw() {
-    var ctx = document.getElementById('canvas').getContext('2d');
-    for (var i=0;i<6;i++){
-      for (var j=0;j<6;j++){
-        ctx.strokeStyle = 'rgb(0,' + Math.floor(255-42.5*i) + ',' +
-                         Math.floor(255-42.5*j) + ')';
-        ctx.beginPath();
-        ctx.arc(12.5+j*25,12.5+i*25,10,0,Math.PI*2,true);
-        ctx.stroke();
-      }
-    }
-  }
-
- - - -

The result looks like this:

- -

{{EmbedLiveSample("A_strokeStyle_example", "180", "180", "https://mdn.mozillademos.org/files/253/Canvas_strokestyle.png")}}

- -

Transparenz

- -

Zusätzlich zu deckenden Formen können wir auch teiltransparente (oder durchscheinende) Formen zeichnen. Dies geschieht entweder durch das Setzen der Eigenschaft globalAlpha oder die Zuordnung einer teiltransparenten Farbe zu einem Zeichen- oder Füllstil.

- -
-
{{domxref("CanvasRenderingContext2D.globalAlpha", "globalAlpha = transparencyValue")}}
-
-

Wendet den angegebenen Transparenz-Wert auf alle nachfolgend gezeichneten Formen an. Der Wert muss zwischen 0.0 (vollständig transparent) und 1.0 (vollständig deckend) liegen. Der Standardwert ist 1.0.

-
-
- -

Die Eigenschaft globalTransparency ist nützlich, wenn man viele Formen mit gleicher Transparenz zeichnen möchte; meist ist es aber praktischer, die Transparenz jeder einzelnen Form gemeinsam mit ihrer Farbe zu definieren.

- -

Die Eigenschaften strokeStyle und fillStyle akzeptieren CSS rgba Farbwerte, daher kann die Transparenz direkt bei der Zuordnung einer Farbe wie folgt gesetzt werden:

- -
// Assigning transparent colors to stroke and fill style
-
-ctx.strokeStyle = "rgba(255,0,0,0.5)";
-ctx.fillStyle = "rgba(255,0,0,0.5)";
-
- -

Die rgba()-Funktion entspricht der rgb()-Funktion, allerdings mit einem zusätzlichen Parameter am Ende. Dieser Wert bestimmt die Transparenz dieser bestimmten Farbe. Der Gültigkeitsbereich umfasst Werte zwischen 0.0 (völlig transpartent) und 1.0 (vollständig deckend).

- -

Beispiel für globalAlpha

- -

In diesem Beispiel zeichnen wir einen Hintergrund aus vier unterschiedlich gefärbten Quadraten. Über diese legen wir dann einige transparente Kreise. Die Eigenschaft globalAlpha wird auf den Wert 0.2 gesetzt, der dann für alle folgend gezeichneten Formen verwendet wird. Jeder Durchlauf der for-Schleife zeichnet einen Satz Kreise mit zunehmendem Radius. Das Endresultat ist ein kreisförmiger Verlauf. Durch das Übereinanderlagern von immer mehr Kreisen reduzieren wir letztlich die Transparenz bereits gezeichneter Kreise. Erhöhen wir die Anzahl der Durchläufe (und damit der gezeichneten Kreise) weiter, wird der Hintergrund in der Bildmitte irgendwann völlig überdeckt.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  // draw background
-  ctx.fillStyle = '#FD0';
-  ctx.fillRect(0,0,75,75);
-  ctx.fillStyle = '#6C0';
-  ctx.fillRect(75,0,75,75);
-  ctx.fillStyle = '#09F';
-  ctx.fillRect(0,75,75,75);
-  ctx.fillStyle = '#F30';
-  ctx.fillRect(75,75,75,75);
-  ctx.fillStyle = '#FFF';
-
-  // set transparency value
-  ctx.globalAlpha = 0.2;
-
-  // Draw semi transparent circles
-  for (i=0;i<7;i++){
-    ctx.beginPath();
-    ctx.arc(75,75,10+10*i,0,Math.PI*2,true);
-    ctx.fill();
-  }
-}
- - - -

{{EmbedLiveSample("A_globalAlpha_example", "180", "180", "https://mdn.mozillademos.org/files/232/Canvas_globalalpha.png")}}

- -

Beispiel für die Verwendung von rgba()

- -

Das zweite Beispiel ist ähnlich dem ersten, aber hier überlagern wir farbige Flächen mit schmalen, weißen Rechtecken zunehmender Deckkraft. Die Verwendung von rgba() an Stelle von globalAlpha erlaubt uns mehr Kontrolle und Flexibilität, weil wir damit Strich- und Füllstil unterschiedlich behandeln können.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // Draw background
-  ctx.fillStyle = 'rgb(255,221,0)';
-  ctx.fillRect(0,0,150,37.5);
-  ctx.fillStyle = 'rgb(102,204,0)';
-  ctx.fillRect(0,37.5,150,37.5);
-  ctx.fillStyle = 'rgb(0,153,255)';
-  ctx.fillRect(0,75,150,37.5);
-  ctx.fillStyle = 'rgb(255,51,0)';
-  ctx.fillRect(0,112.5,150,37.5);
-
-  // Draw semi transparent rectangles
-  for (var i=0;i<10;i++){
-    ctx.fillStyle = 'rgba(255,255,255,'+(i+1)/10+')';
-    for (var j=0;j<4;j++){
-      ctx.fillRect(5+i*14,5+j*37.5,14,27.5);
-    }
-  }
-}
- - - -

{{EmbedLiveSample("An_example_using_rgba()", "180", "180", "https://mdn.mozillademos.org/files/246/Canvas_rgba.png")}}

- -

Linienstile

- -

Mehrere Eigenschaften ermöglichen den Zugriff auf Linienstile:

- -
-
{{domxref("CanvasRenderingContext2D.lineWidth", "lineWidth = value")}}
-
Setzt die Breite später gezeichneter Linien.
-
{{domxref("CanvasRenderingContext2D.lineCap", "lineCap = type")}}
-
Definiert die Form der Linienenden.
-
{{domxref("CanvasRenderingContext2D.lineJoin", "lineJoin = type")}}
-
Definiert die Form der „Ecken“, an denen sich Linien treffen.
-
{{domxref("CanvasRenderingContext2D.miterLimit", "miterLimit = value")}}
-
Definiert einen Grenzwert für die Gehrung (Schräge) am spitzen Winkel zwischen zwei Linien; damit wird die Dicke des Verbindungsbereichs begrenzt.
-
- -
-
{{domxref("CanvasRenderingContext2D.getLineDash", "getLineDash()")}}
-
-

Gibt den aktuellen Array für das Strichlierungsmuster zurück (eine gerade Anzahl nicht-negativer Zahlen).

-
-
{{domxref("CanvasRenderingContext2D.setLineDash", "setLineDash(segments)")}}
-
-

Definiert das aktuelle Strichlierungsmuster.

-
-
{{domxref("CanvasRenderingContext2D.lineDashOffset", "lineDashOffset = value")}}
-
-

Beschreibt wo das Strichlierunsmuster startet.

-
-
- -

Die Beispiele unten sollen Ihnen das Verständnis dieser Angaben erleichtern.

- -

Beispiel für lineWidth

- -

Diese Eigenschaft bestimmt die aktuelle Linienbreite. Der Standardwert ist 1.0, und es sind nur positive Zahlen erlaubt.

- -

Die Linienbreite entspricht der Dicke des Strichs, zentriert über der Strecke zwischen den Punkten. Anders ausgedrückt dehnt sich die Fläche der gezeichneten Linie je zur Hälfte links und rechts der Strecke aus. Weil Canvas-Koordinaten sich nicht unmittelbar auf Pixel beziehen müssen, sollte man etwas Sorgfalt walten lassen um „scharfe“ bzw. definierte horizontale und vertikale Linien zu erhalten.

- -

Im folgenden Beispiel werden zehn gerade Linien zunehmender Breite gezeichnet. Die Linie ganz links ist 1.0 Einheiten breit. Allerdings erscheint diese Linie - und auch alle anderen Linien mit einem ungeraden Wert für die Liniendicke - nicht wirklich scharf; schuld daran ist die Positionierung.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  for (var i = 0; i < 10; i++){
-    ctx.lineWidth = 1+i;
-    ctx.beginPath();
-    ctx.moveTo(5+i*14,5);
-    ctx.lineTo(5+i*14,140);
-    ctx.stroke();
-  }
-}
-
- - - -

{{EmbedLiveSample("A_lineWidth_example", "180", "180", "https://mdn.mozillademos.org/files/239/Canvas_linewidth.png")}}

- -

Um scharfe Linien zu erzeugen muss man erst verstehen, wie Linien gezeichnet werden. In den Bildern unten steht das Gitter für das Koordinatensystem im Canvas. Die Quadrate zwischen den Gitterlinien entsprechen reellen Pixeln der Bildschirmdarstellung. Im ersten Bild wird ein Rechteck zwischen (2,1) und (5,5) gefüllt. Das gesamte Rechteck zwischen diesen Koordinaten (im Bild hellrot) fällt mit den Pixelgrenzen zusammen, und es resultiert eine Rechteckfläche mit scharfen Abgrenzungen.

- -

- -

Stellen wir uns jetzt einen Pfad von (3,1) nach (3,5) mit einer Linienbreite von 1.0 vor, dann erhalten wir die Situation im zweiten Bild. Die zu füllende Fläche erstreckt sich jeweils nur zur Hälfte über die links und rechts angrenzenden Pixel. Dieser Zustand kann nur näherungsweise umgesetzt werden, so dass die betroffenen Pixel nur in der halben Intensität gefüllt werden. Genau das passierte mit der 1.0 Einheiten breiten Linie im vorhergehenden Programm.

- -

Um das zu korrigieren muss man bei der Definition der Verbindungsstrecke besonders genau sein. Mit dem Wissen, dass eine Linie der Breite 1.0 sich jeweils zur Hälfte auf beide Seiten ausdehnt, kann man die Strecke von (3.5,1) bis (3.5,5) legen und erhält die Situation im dritten Bild - die eine Einheit breite Linie füllt exakt eine Pixelreihe.

- -
-

Anmerkung: Bitte beachten Sie, dass in dem Beispiel der vertikalen Linie die Y-Position sich immer noch auf eine ganzzahlige Position bezieht - andernfalls würden an den Endpunkten die Pixel nur halb gedeckt.(Beachten Sie aber auch, dass dieses Verhalten zusätzlich vom lineCap-Stil abhängt, der standardmäßig auf butt eingestellt ist. Möchten Sie einheitliche Striche mit Koordinaten in halben Pixeln für ungerade Liniendicken berechnen, können Sie dafür den lineCap-Sti auf square setzten, wodurch der Aussenrand des Strichs am Endpunkt automatisch über den ganzen Pixel ausgedehnt wird.)

- -

Beachten Sie auch, dass nur der Start- und Zielpunkt einer Strecke betroffen ist. Bei einer mit closePath() geschlossenen Strecke git es keinen solchen Start- bzw. Zielpunkt, stattdessen werden alle Endpunkte mit den vorhergehenden und nachfolgenden Segmenten entsprechend dem aktuellen lineJoin-Stil verbunden; dessen Standardwert ist miter, was eine automatische Ausweitung der äußeren Linienränder bis zu ihrem Schnittpunkt bewirkt, so dass der gezeichnete Strich an jedem Endpunkt exakt volle Pixel abdeckt, wenn die verbundenen Segmente horizontal und/oder vertikal verlaufen. Die folgenden zwei Abschnitte demonstrieren das Verhalten dieser zusätzlichen Linien-Stile.

-
- -

Für scharfe Ränder bei geradzahligen Linienbreiten definieren wir den Pfad zwischen den Pixeln (z.B. (3,1) bis (3,5)), so dass jede Hälfte des Strichs einer ganzzahligen Anzahl von Pixeln entspricht.

- -

Wenn die sorgfältige Arbeit mit dem Pixelraster in 2D-Grafiken anfangs auch noch etwas anstrengend erscheinen mag, so gewährleistet sie letztlich eine korrekte Abbildung der Grafiken, unabhänging von Skalierungen oder anderen Transformationen. Eine korrekt positionierte Linie mit einer Breite von 1.0 wird nach einer Vergrößerung um den Faktor 2 eine Linie der Breite 2.0 ergeben, wiederum scharf umrissen und an der richtigen Position.

- -

Beispiel für lineCap

- -

Die Eigenschaft lineCap bestimmt das Erschinungsbild der Linienenden. Sie kann drei verschiedene Werte annehmen: butt (Standardwert), round und square.

- -

- -
-
butt
-
-

Glatte Enden an den Endpunkten.

-
-
round
-
-

Abgerundete Enden.

-
-
square
-
-

Die Enden werden glatt abgeschnitten, es wird aber vorher ein Rechteck angefügt, gleicher Breite wie die Linie und halb so lang wie breit.

-
-
- -

In diesem Beispiel ziehen wir drei Linien, jede davon mit einem unterschiedlichen Wert für lineCap. Zwei Hilfslinien helfen dabei die Unterschiede zu verdeutlichen. Jede Linie beginnt und endet exakt an den Hilfslinien.

- -

Die linke Linie verwendet die Option butt. Sie sehen, dass sie exakt an den Hilfslinien endet. Die zweite Linie verwendet die Option round, es wird dadurch ein Halbkreis mit einem Radius entsprechend der halben Linienbreite angehängt. Die recht Linie verwendet die Option square. Diese hängt ein Rechteck von gleicher Breite und einer Länge der halben Linienbreite an.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  var lineCap = ['butt','round','square'];
-
-  // Draw guides
-  ctx.strokeStyle = '#09f';
-  ctx.beginPath();
-  ctx.moveTo(10,10);
-  ctx.lineTo(140,10);
-  ctx.moveTo(10,140);
-  ctx.lineTo(140,140);
-  ctx.stroke();
-
-  // Draw lines
-  ctx.strokeStyle = 'black';
-  for (var i=0;i<lineCap.length;i++){
-    ctx.lineWidth = 15;
-    ctx.lineCap = lineCap[i];
-    ctx.beginPath();
-    ctx.moveTo(25+i*50,10);
-    ctx.lineTo(25+i*50,140);
-    ctx.stroke();
-  }
-}
-
- - - -

{{EmbedLiveSample("A_lineCap_example", "180", "180", "https://mdn.mozillademos.org/files/236/Canvas_linecap.png")}}

- -

Beispiel für lineJoin

- -

Die Eigenschaft lineJoin bestimmt, wie zwei zusammenhängende Segmente (Linien-, Kurven- oder Kreissegmente) länger als Null in einer Form verbunden werden („degenerierte“ Elemente mit zusammenfallenden Start- und Zielpunkten, also mit der Länge Null, werden dabei übersprungen).

- -

Diese Eigenschaft kann drei mögliche Werte annehmen: round, bevel und miter (Standardeinstellung). Beachten Sie, dass die lineJoin-Einstellung keine Auswirkungen hat wenn die Segemente in gleicher Richtung verlaufen, da in diesem Falle keine Verbindungsfläche eingefügt wird.

- -

- -
-
round
-
-

Rundet die Ecke ab indem ein zusätzlicher Kreisausschnitt am gemeinsamen Endpunkt der verbundenen Segmente eingefügt wird. Der Radius entspricht der halben Liniendicke.

-
-
bevel
-
-

Füllt die Fläche zwischen dem gemeinsamen Endpunkt und den beiden getrennten äußeren Ecken der Segmente mit einem Dreieck.

-
-
miter
-
-

Verlängert die Aussenränder der Segmente bis sie sich in einem Punkt schneiden, wobei eine rautenförmige Fläche eingefügt wird. Diese Einstellung wird durch die Eigenschaft miterLimit beeinflusst, welche später erklärt wird.

-
-
- -

Das folgenden Beispielprogramm verdeutlicht die Auswirkungen der drei Varianten von lineJoin anhand von drei Linienzügen; das Ergebnis sehen Sie oben.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  var lineJoin = ['round','bevel','miter'];
-  ctx.lineWidth = 10;
-  for (var i=0;i<lineJoin.length;i++){
-    ctx.lineJoin = lineJoin[i];
-    ctx.beginPath();
-    ctx.moveTo(-5,5+i*40);
-    ctx.lineTo(35,45+i*40);
-    ctx.lineTo(75,5+i*40);
-    ctx.lineTo(115,45+i*40);
-    ctx.lineTo(155,5+i*40);
-    ctx.stroke();
-  }
-}
-
- - - -

{{EmbedLiveSample("A_lineJoin_example", "180", "180", "https://mdn.mozillademos.org/files/237/Canvas_linejoin.png")}}

- -

Beispiel für die Eigenschaft miterLimit

- -

Wie wir im vorhergehenden Beispiel gesehen haben, werden mit der Option miter die äußeren Kanten von zwei schneidenden Linien bis zu ihrem Schnittpunkt verlängert. Schneiden sich die Linien unter einem großen Winkel, liegt dieser äußere Schnittpunkt nicht allzu weit vom inneren entfernt. Mit kleiner werdendem Winkel vergrößert sich die Länge dieses Bereichs (genannt Gehrung = engl. miter) aber exponentiell.

- -

Die Eigenschaft miterLimit bestimmt, wie weit der äußere Verbindungspunkt maximal vom inneren entfernt sein darf. Wird dieser Wert überschritten, wird stattdessen eine Fase gezogen, ähnlich der Einstellung bevel. Beachten Sie: Die maximale Gehrungslänge ist das Produkt aus der Liniendicke, gemessen im aktuellen Koordinatensystem, und dem Wert von miterLimit (Standardwert 10.0 im HTML {{HTMLElement("canvas")}}). Daher kann miterLimit unabhängig vom aktuellen Vergrößerungsmaßstab oder irgendeiner affinen Transformation der Strecke gesetzt werden; es beeinflusst nur die reell abgebildete Form der Kanten.

- -

Präziser gesagt ist beschreibt miterLimit das maximale Verhältnis der Ausdehnung der Verlängerung nach außen (diese wird im HTML Canvas zwischen dem Schnittpunkt der äußeren Kanten der schneidenden Linien und dem gemeinsamen Endpunkt der Strecken gemessen) zur halben Liniendicke. Dazu gleichwertig ist die Definition als das maximal erlaubte Verhältnis der Entfernung zwischen dem inneren und äußeren Eckpunkt der Verbindung und der vollen Liniendicke. Er entspricht mathematisch dem Kosekans des halben minimalen Innenwinkels zwischen den verbundenen Segmenten, unterhalb dessen nur eine Fase ohne weitere Ausdehnung gezeichnet wird.

- - - -

In dieser einfachen Demonstration können Sie den Wert für miterLimit dynamisch einstellen und dabei verfolgen, wie sich die Form der Ecken ändert. Die blauen Linien zeigen an wo Start- und Zielpunkt jedes Zickzack-Segments liegen.

- -

Stellen Sie in diesem Programm ein miterLimit kleiner als 4.2 ein, wird an keiner der sichtbaren Ecken zu einer zusätzlichen Ausdehnung durch die Gehrung kommen; stattdessen entsteht an der blauen Linie eine Fase. Ist miterLimit größer als zehn, verbinden sich die meisten Linien in diesem Beispiel in einer Gehrung die weit über die blauen Linie hinausreicht, wobei sich die Höhe von links nach rechts wegen der zunehmenden Winkel verringert. Für dazwischenliegende Werte bilden die linken Elemente eine ausgedehnte Gehrung, während nach rechts die Spitzen durch Fasen ersetzt werden.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // Clear canvas
-  ctx.clearRect(0,0,150,150);
-
-  // Draw guides
-  ctx.strokeStyle = '#09f';
-  ctx.lineWidth   = 2;
-  ctx.strokeRect(-5,50,160,50);
-
-  // Set line styles
-  ctx.strokeStyle = '#000';
-  ctx.lineWidth = 10;
-
-  // check input
-  if (document.getElementById('miterLimit').value.match(/\d+(\.\d+)?/)) {
-    ctx.miterLimit = parseFloat(document.getElementById('miterLimit').value);
-  } else {
-    alert('Value must be a positive number');
-  }
-
-  // Draw lines
-  ctx.beginPath();
-  ctx.moveTo(0,100);
-  for (i=0;i<24;i++){
-    var dy = i%2==0 ? 25 : -25 ;
-    ctx.lineTo(Math.pow(i,1.5)*2,75+dy);
-  }
-  ctx.stroke();
-  return false;
-}
-
- - - -

{{EmbedLiveSample("A_demo_of_the_miterLimit_property", "400", "180", "https://mdn.mozillademos.org/files/240/Canvas_miterlimit.png")}}

- -

Strichlierte Linien verwenden

- -

Die Methode setLineDash und die Eigenschaft lineDashOffset definieren die Strichlierung von Linien. setLineDash akzeptiert eine Liste von Zahlenwerten, die abwechselnd die Abstände von Strichen und Zwischenräumen definieren, wobei lineDashOffset einen Versatz am Start des Musters definiert.

- -

In diesem Beispiel erzeugen wir einen „marschierende Ameisen“-Effekt. Diese Animation finden wir oft bei Auswahlwerkzeugen von Bildbearbeitungsprogrammen. Es macht dort die Grenze zwischen Auswahlbereich und Hintergrund sichtbar. Später werden Sie in diesem Tutorial noch lernen solche oder ähnliche einfache Animationen zu erzeugen.

- - - -
var ctx = document.getElementById('canvas').getContext('2d');
-var offset = 0;
-
-function draw() {
-  ctx.clearRect(0,0, canvas.width, canvas.height);
-  ctx.setLineDash([4, 2]);
-  ctx.lineDashOffset = -offset;
-  ctx.strokeRect(10,10, 100, 100);
-}
-
-function march() {
-  offset++;
-  if (offset > 16) {
-    offset = 0;
-  }
-  draw();
-  setTimeout(march, 20);
-}
-
-march();
- -

{{EmbedLiveSample("Using_line_dashes", "120", "120", "https://mdn.mozillademos.org/files/9853/marching-ants.png")}}

- -

Gradienten

- -

Wie in jedem anderen Zeichenprogramm können wir auch im Canvas linien- und kreisförmige Verläufe zum Zeichnen und Füllen von Formen verwenden. Mit den folgenden Befehlen können wir ein {{domxref("CanvasGradient")}}-Objekt erzeugen; dieses ordnen wir dann einer fillStyle- oder strokeStyle-Eigenschaft zu.

- -
-
{{domxref("CanvasRenderingContext2D.createLinearGradient", "createLinearGradient(x1, y1, x2, y2)")}}
-
-

Erzeugt eine lineares Verlaufsobjekt mit Startpunkt (x1, y1) und Zielpunkt (x2, y2).

-
-
{{domxref("CanvasRenderingContext2D.createRadialGradient", "createRadialGradient(x1, y1, r1, x2, y2, r2)")}}
-
-

Erzeugt einen kreisförmige Verlauf. Die Parameter beschreiben zwei Kreise, der erste mit dem Mittelpunkt bei (x1, y1) und einem Radius von r1, der zweite mit Mittelpunkt (x2, y2) und demRadius r2.

-
-
- -

For example:

- -
var lineargradient = ctx.createLinearGradient(0, 0, 150, 150);
-var radialgradient = ctx.createRadialGradient(75, 75, 0, 75, 75, 100);
-
- -

Sobald wir ein canvasGradient-Objekt erzeugt haben, können wir mit der Methode addColorStop() Farben zuordnen.

- -
-
{{domxref("CanvasGradient.addColorStop", "gradient.addColorStop(position, color)")}}
-
-

Erzeugt einen neuen Farbwert am Verlaufsobjekt. Das Positionsargument ist eine Zahl zwischen 0.0 und 1.0, und es definiert die relative Position der Farbe innerhalb der Verlaufsstrecke. Das Farbargument ist eine Zeichenkette für eine CSS {{cssxref("<color>")}} und beschreibt den Farbwert, den der Farbverlauf bis zur angegebenen Position erreicht hat.

-
-
- -

Die Anzahl der Farbschritte ist beliebig. Es folgt ein Beispiel für einen einfachen Verlauf von Weiss nach Schwarz.

- -
var lineargradient = ctx.createLinearGradient(0,0,150,150);
-lineargradient.addColorStop(0, 'white');
-lineargradient.addColorStop(1, 'black');
-
- -

Beispiel für createLinearGradient

- -

In diesem Beispiel erzeugen wir zwei unterschiedliche Verläufe. Wie Sie sehen, akzeptieren sowohl strokeStyle als auch fillStyle ein canvasGradient-Objekt als Eingabe.

- -

 

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // Create gradients
-  var lingrad = ctx.createLinearGradient(0,0,0,150);
-  lingrad.addColorStop(0, '#00ABEB');
-  lingrad.addColorStop(0.5, '#fff');
-  lingrad.addColorStop(0.5, '#26C000');
-  lingrad.addColorStop(1, '#fff');
-
-  var lingrad2 = ctx.createLinearGradient(0,50,0,95);
-  lingrad2.addColorStop(0.5, '#000');
-  lingrad2.addColorStop(1, 'rgba(0,0,0,0)');
-
-  // assign gradients to fill and stroke styles
-  ctx.fillStyle = lingrad;
-  ctx.strokeStyle = lingrad2;
-
-  // draw shapes
-  ctx.fillRect(10,10,130,130);
-  ctx.strokeRect(50,50,50,50);
-
-}
-
- -

 

- - - -

Der erste Teil beschreibt den Hintergrundverlauf. Wie Sie sehen, haben wir an der gleichen Position zwei unterschiedliche Farben definiert. Das dient zur Erzeugung sprunghafter Farbänderungen - hier von weiss nach grün. Üblicherweise spielt es keine Rolle in welcher Reihenfolge die Farbstufen definiert werden, in diesem speziellen Fall ist die Reihenfolge aber wichtig. Nehmen Sie die Zuordnungen am besten in der tatsächlichen Reihenfolge vor, so beugen Sie möglichen Problemen vor.

- -

Beim zweiten Verlauf haben wir an der Startposition (0,0) keinen Farbwert definiert, was auch nicht unbedingt nötig ist, weil dann automatisch die Farbe der nächsten Farbstufe verwendet wird. Daher bewirkt die Zuordnung der Farbstufe „schwarz“ an der Position 0.5 automatisch eine einheitliche Schwarzfärbung vom Start Null bis zur Position 0.5.

- -

{{EmbedLiveSample("A_createLinearGradient_example", "180", "180", "https://mdn.mozillademos.org/files/235/Canvas_lineargradient.png")}}

- -

Beispiel für createRadialGradient

- -

In diesem Beispiel werden wir vier kreisförmige Verläufe definieren. Weil wir volle Kontrolle über die Start- und Zielpunkte der Verläufe haben, können wir komplexere Verläufe erzeugen als z.B. die einfacheren Radialverläufe in Photoshop, die uns nur Verläufe mit einem gemeinsamen Mittelpunkt und radial gleichmäßig verteilten Farben erlauben würden.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // Create gradients
-  var radgrad = ctx.createRadialGradient(45,45,10,52,50,30);
-  radgrad.addColorStop(0, '#A7D30C');
-  radgrad.addColorStop(0.9, '#019F62');
-  radgrad.addColorStop(1, 'rgba(1,159,98,0)');
-
-  var radgrad2 = ctx.createRadialGradient(105,105,20,112,120,50);
-  radgrad2.addColorStop(0, '#FF5F98');
-  radgrad2.addColorStop(0.75, '#FF0188');
-  radgrad2.addColorStop(1, 'rgba(255,1,136,0)');
-
-  var radgrad3 = ctx.createRadialGradient(95,15,15,102,20,40);
-  radgrad3.addColorStop(0, '#00C9FF');
-  radgrad3.addColorStop(0.8, '#00B5E2');
-  radgrad3.addColorStop(1, 'rgba(0,201,255,0)');
-
-  var radgrad4 = ctx.createRadialGradient(0,150,50,0,140,90);
-  radgrad4.addColorStop(0, '#F4F201');
-  radgrad4.addColorStop(0.8, '#E4C700');
-  radgrad4.addColorStop(1, 'rgba(228,199,0,0)');
-
-  // draw shapes
-  ctx.fillStyle = radgrad4;
-  ctx.fillRect(0,0,150,150);
-  ctx.fillStyle = radgrad3;
-  ctx.fillRect(0,0,150,150);
-  ctx.fillStyle = radgrad2;
-  ctx.fillRect(0,0,150,150);
-  ctx.fillStyle = radgrad;
-  ctx.fillRect(0,0,150,150);
-}
-
- - - -

Wir haben die Mittelpunkte von Start- und Zielkreis etwas gegeneinander versetzt, was einen kugelförmigen 3D-Effekt erzeugt. Man sollte vermeiden, dass sich die Begrenzungen des inneren und des äußeren Kreises schneiden, weil das unberechenbare Effekte erzeugen kann.

- -

Die letzte Farbstufe in jedem der vier Verläufe verwendet eine völlig transparente Farbe. Für einen gelungenen Übergang zur vorhergehenden Stufe sollten die Farbwerte identisch sein. Das ist im obigen Programm nicht gleich erkennbar, weil unterscheidliche Schreibweisen für die Farbwerte verwendet wurden. Berücksichtigen Sie, dass z.B. beim ersten Farbverlauf #019F62 auch als rgba(1,159,98,1) geschrieben werden könnte.

- -

{{EmbedLiveSample("A_createRadialGradient_example", "180", "180", "https://mdn.mozillademos.org/files/244/Canvas_radialgradient.png")}}

- -

Muster

- -

In einem der Beispiele auf der vorhergehenden Seite haben wir mehrere Schleifen verwendet, um Bilder in Form eines Musters anzuordnen. Allerdings gibt es auch eine weit einfachere Methode: createPattern()

- -
-
{{domxref("CanvasRenderingContext2D.createPattern", "createPattern(image, type)")}}
-
-

Erzeugt ein neues Muster-Objekt in Canvas und gibt es zurück. image ist eine {{domxref("CanvasImageSource")}} (ein {{domxref("HTMLImageElement")}}, ein weiterer Canvas, ein {{HTMLElement("video")}} Element, oder ähnliches). Der String image gibt an wie das Bild benutzt wird.

-
-
- -

type enthält eine der folgenden Zeichenketten und bestimmt, wie aus dem Bild ein Muster erzeugt wird.

- -
-
repeat
-
-

Wiederhole („kachle“) das Bild horizontal und vertikal.

-
-
repeat-x
-
-

Wiederhole das Bild nur horizontal.

-
-
repeat-y
-
-

Nur vertikale Wiederholung.

-
-
no-repeat
-
-

Keine Wiederholung, das Bild wird nur einmal benutzt.

-
-
- -

 

- -

Wir verwenden eine Methode ähnlich den vorhergehenden Beispielen zu Verläufen, um ein {{domxref("CanvasPattern")}}-Objekt zu erzeugen. Haben wir das Muster erst erzeugt, können wir es einer fillStyle- oder strokeStyle-Eigenschaft zuordnen.

- -
var img = new Image();
-img.src = 'someimage.png';
-var ptrn = ctx.createPattern(img,'repeat');
-
- -

 

- -
-

Anmerkung: Wie bei drawImage() müssen Sie auch hier sicherstellen, dass das Bild vollständig geladen wurde bevor Sie die Methode aufrufen; andernfalls kann das Muster inkorrekt dargestellt werden.

-
- -

Beispiel für createPattern

- -

Im abschließenden Beispiel erzeugen wir ein Muster um es dann dem fillStyle zuzuordnen. Bemerkenswert ist hierbei die Verwendung des onload()-Handlers, um zu gewährleisten, dass die Bilddatei erst dann dem Muster zugeordnet wird, wenn sie vollständig geladen wurde.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  // create new image object to use as pattern
-  var img = new Image();
-  img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
-  img.onload = function(){
-
-    // create pattern
-    var ptrn = ctx.createPattern(img,'repeat');
-    ctx.fillStyle = ptrn;
-    ctx.fillRect(0,0,150,150);
-
-  }
-}
-
- - - -

{{EmbedLiveSample("A_createPattern_example", "180", "180", "https://mdn.mozillademos.org/files/222/Canvas_createpattern.png")}}

- -

Schatten

- -

An der Erzeugung von Schatten sind vier Eignschaften beteiligt:

- -
-
{{domxref("CanvasRenderingContext2D.shadowOffsetX", "shadowOffsetX = float")}}
-
-

Definiert die horizontale Ausdehnung des Schattens vom Objekt weg. Dieser Wert wird nicht durch die Transforamtionsmatrix beeinflusst. Standardwert ist 0.

-
-
{{domxref("CanvasRenderingContext2D.shadowOffsetY", "shadowOffsetY = float")}}
-
-

Wie shadowOffsetY, aber in vertikaler Richtung.

-
-
{{domxref("CanvasRenderingContext2D.shadowBlur", "shadowBlur = float")}}
-
-

Definiert das Ausmaß der Unschärfe; der Wert beschreibt dabei nicht eine bestimmte Anzahl von Pixeln. Er wird nicht durch die Transformationsmatrix beeinflusst. Standardwert ist 0.

-
-
{{domxref("CanvasRenderingContext2D.shadowColor", "shadowColor = color")}}
-
-

Eine CSS Farbdefinition der Schattenfarbe. Standardwert ist voll tranparentes Schwarz.

-
-
- -

Die Eigenschaften shadowOffsetX und shadowOffsetY bestimmen wie weit weg vom Objekt sich der Schatten in x- und y-Richtung erstrecken soll; diese Werte werden nicht von der aktuellen Tranformationsmatrix beeinflusst. Mit negative Werten verläuft der Schatten nach links und oben, mit positiven nach rechts und unten. Standardwert für beide Parameter ist 0.

- -

Die Eigenschaft shadowBlur definiert die Ausdehnung der Unschärfezone; der Wert beschreibt dabei keine bestimmte Anzahl von Pixeln und wird durch die Transformationsmatrix nicht verändert. Standardwert: 0.

- -

Die Eigenschaft shadowColor ist ein regulärer CSS-Farbwert, der die Farbe des Schatteneffektes definiert. Standardwert: voll-transparentes Schwarz.

- -
-

Note: Schatten werden nur bei source-over compositing operations gezeichnet.

-
- -

Beispiel für Text mit Schatteneffekt

- -

Dieses Beispiel zeichnet eine Buchstabenfolge mit einem Schatteneffekt.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  ctx.shadowOffsetX = 2;
-  ctx.shadowOffsetY = 2;
-  ctx.shadowBlur = 2;
-  ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
-
-  ctx.font = "20px Times New Roman";
-  ctx.fillStyle = "Black";
-  ctx.fillText("Sample String", 5, 30);
-}
-
- - - -

{{EmbedLiveSample("A_shadowed_text_example", "180", "100", "https://mdn.mozillademos.org/files/2505/shadowed-string.png")}}

- -

Wir werden uns die font-Eigenschaft und die fillText-Methode im nächsten Kapitel über das Zeichnen von Text genauer ansehen.

- -

Canvas Füllregeln

- -

Bei der Verwendung von fill ( oder {{domxref("CanvasRenderingContext2D.clip", "clip")}} und {{domxref("CanvasRenderingContext2D.isPointInPath", "isPointinPath")}}) kann man wahlweise eine Füllregel angeben, mit der man über die Berechnung der Windungszahl bestimmt ob ein Punkt innerhalb oder ausserhalb der Strecke liegt und ob die Fläche dementsprechend gefüllt wird oder nicht. Das ist nützlich wenn eine Strecke sich selbst schneidet oder in eine andere eingeschrieben ist.

- -

Zwei Werte sind möglich:

- - - -

In diesem  Beispiel verwenden wir die evenodd-Regel.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  ctx.beginPath();
-  ctx.arc(50, 50, 30, 0, Math.PI*2, true);
-  ctx.arc(50, 50, 15, 0, Math.PI*2, true);
-  ctx.fill("evenodd");
-}
- - - -

{{EmbedLiveSample("Canvas_fill_rules", "110", "110", "https://mdn.mozillademos.org/files/9855/fill-rule.png")}}

- -

{{PreviousNext("Web/API/Canvas_API/Tutorial/Drawing_shapes", "Web/API/Canvas_API/Tutorial/Drawing_text")}}

diff --git a/files/de/web/guide/html/canvas_tutorial/basic_animations/index.html b/files/de/web/guide/html/canvas_tutorial/basic_animations/index.html deleted file mode 100644 index 78ca0ac2fc..0000000000 --- a/files/de/web/guide/html/canvas_tutorial/basic_animations/index.html +++ /dev/null @@ -1,307 +0,0 @@ ---- -title: Einfache Animationen -slug: Web/Guide/HTML/Canvas_Tutorial/Basic_animations -translation_of: Web/API/Canvas_API/Tutorial/Basic_animations ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Web/API/Canvas_API/Tutorial/Advanced_animations")}}
- -
-

Seitdem wir JavaScript benutzen, um {{HTMLElement("canvas")}}-Elemente zu steuern, ist es auch sehr einfach, interaktive Animationen zu erzeugen. In diesem Kapitel werden wir uns ein paar einfachen Animationen widmen.

-
- -

Die wahrscheinlich größte Einschränkung ist, dass jede Form, die einmal gezeichnet wird, genauso bleibt wie anfänglich. Wenn wir sie bewegen wollen, müssen wir sie neuzeichnen. Aber: Auch alle anderen Formen, die wir davor schon gezeichnet haben, müssen auch neu gezeichnet werden! Es beansprucht leider einiges an Zeit, komplexe Figuren neu zu zeichnen.

- -

Grundlagen der Animation

- -

Diese Schritte müssen Sie befolgen, um ein neues Frame zu zeichnen:

- -
    -
  1. Bereinigen Sie die Zeichenfläche (canvas)
    - Sofern die Form, die Sie zeichnen wollen, nicht den gesamten Platz der Zeichenfläche einnimmt, müssen Sie alle vorherigen Formen entfernen. Am einfachsten erreichen Sie dies über die {{domxref("CanvasRenderingContext2D.clearRect", "clearRect()")}}-Methode.
    2. -
  2. Sichern Sie den Canvas-Zustand
    - Wenn Sie irgendeine Einstellung verändern (wie das Layout, Transformtationen, etc.), die den Status der Zeichenfläche beeinflussen, sollten Sie den Ursprungszustand sichern. Nur so gewährleisten Sie, dass der Ursprungszustand für jedes neue Frame verwendet wird. Verwenden Sie hierfür die save()-Methode.
    3. -
  3. Zeichnen Sie die animierte Form
    - Hier erzeugen Sie nun endlich die eigentliche Animation.
    4. -
  4. Setzen Sie den Canvas-Zustand zurück.
    - Mit der restore()-Methode können Sie auf den Ursprungszustand zurückwechseln, um ein neues Frame zu erzeugen.
    5. -
- -

Steuerung einer Animation

- -

Formen werden auf eine Zeichenfläche appliziert, indem die entsprechende Canvas-Methode verwendet wird oder eine vorher erzeugte Funktion aufgerufen wird. Im Normalfall erscheint die Canvas-Zeichnung erst, nachdem das Skript vollständig ausgeführt wurde. So ist es nicht möglich, eine Animation durch eine for-Schleife zu erzeugen.

- -

Das bedeutet nun, dass wir einen Weg finden müssen, die Zeichenfunktion für eine bestimmte Zeitdauer ausführen zu können. Dafür gibt es nun zwei Wege, um eine Animation so zu steuern:

- -

Updates nach Zeitplan

- -

Einerseits gibt es die {{domxref("window.setInterval()")}}-, {{domxref("window.setTimeout()")}}- und {{domxref("window.requestAnimationFrame()")}}-Funktionen, die benutzt werden, um eine bestimmte Funktion nach einer Zeitspanne aufzurufen.

- -
-
{{domxref("WindowTimers.setInterval", "setInterval(function, delay)")}}
-
Ruft die unter function spezifierte Funktion wiederholend nach der in delay (Milisekunden) definierten Zeitspanne auf.
-
{{domxref("WindowTimers.setTimeout", "setTimeout(function, delay)")}}
-
Ruft die spezifizierte Funktion nach der unter delay festgelegten Zeitspanne einmalig auf.
-
{{domxref("Window.requestAnimationFrame()", "requestAnimationFrame(callback)")}}
-
Tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint.
-
- -

If you don't want any user interaction you can use the setInterval() function which repeatedly executes the supplied code. If we wanted to make a game, we could use keyboard or mouse events to control the animation and use setTimeout(). By setting {{domxref("EventListener")}}s, we catch any user interaction and execute our animation functions.

- -
-

In the examples below, we'll use the {{domxref("window.requestAnimationFrame()")}} method to control the animation. The requestAnimationFrame method provides a smoother and more efficient way for animating by calling the animation frame when the system is ready to paint the frame. The number of callbacks is usually 60 times per second and may be reduced to a lower rate when running in background tabs. For more information about the animation loop, especially for games, see the article Anatomy of a video game in our Game development zone.

-
- -

An animated solar system

- -

This example animates a small model of our solar system.

- -
var sun = new Image();
-var moon = new Image();
-var earth = new Image();
-function init() {
-  sun.src = 'https://mdn.mozillademos.org/files/1456/Canvas_sun.png';
-  moon.src = 'https://mdn.mozillademos.org/files/1443/Canvas_moon.png';
-  earth.src = 'https://mdn.mozillademos.org/files/1429/Canvas_earth.png';
-  window.requestAnimationFrame(draw);
-}
-
-function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-
-  ctx.globalCompositeOperation = 'destination-over';
-  ctx.clearRect(0, 0, 300, 300); // clear canvas
-
-  ctx.fillStyle = 'rgba(0, 0, 0, 0.4)';
-  ctx.strokeStyle = 'rgba(0, 153, 255, 0.4)';
-  ctx.save();
-  ctx.translate(150, 150);
-
-  // Earth
-  var time = new Date();
-  ctx.rotate(((2 * Math.PI) / 60) * time.getSeconds() + ((2 * Math.PI) / 60000) * time.getMilliseconds());
-  ctx.translate(105, 0);
-  ctx.fillRect(0, -12, 50, 24); // Shadow
-  ctx.drawImage(earth, -12, -12);
-
-  // Moon
-  ctx.save();
-  ctx.rotate(((2 * Math.PI) / 6) * time.getSeconds() + ((2 * Math.PI) / 6000) * time.getMilliseconds());
-  ctx.translate(0, 28.5);
-  ctx.drawImage(moon, -3.5, -3.5);
-  ctx.restore();
-
-  ctx.restore();
-
-  ctx.beginPath();
-  ctx.arc(150, 150, 105, 0, Math.PI * 2, false); // Earth orbit
-  ctx.stroke();
-
-  ctx.drawImage(sun, 0, 0, 300, 300);
-
-  window.requestAnimationFrame(draw);
-}
-
-init();
-
- - - -

{{EmbedLiveSample("An_animated_solar_system", "310", "310", "https://mdn.mozillademos.org/files/202/Canvas_animation1.png")}}

- -

An animated clock

- -

This example draws an animated clock, showing your current time.

- -
function clock() {
-  var now = new Date();
-  var ctx = document.getElementById('canvas').getContext('2d');
-  ctx.save();
-  ctx.clearRect(0, 0, 150, 150);
-  ctx.translate(75, 75);
-  ctx.scale(0.4, 0.4);
-  ctx.rotate(-Math.PI / 2);
-  ctx.strokeStyle = 'black';
-  ctx.fillStyle = 'white';
-  ctx.lineWidth = 8;
-  ctx.lineCap = 'round';
-
-  // Hour marks
-  ctx.save();
-  for (var i = 0; i < 12; i++) {
-    ctx.beginPath();
-    ctx.rotate(Math.PI / 6);
-    ctx.moveTo(100, 0);
-    ctx.lineTo(120, 0);
-    ctx.stroke();
-  }
-  ctx.restore();
-
-  // Minute marks
-  ctx.save();
-  ctx.lineWidth = 5;
-  for (i = 0; i < 60; i++) {
-    if (i % 5!= 0) {
-      ctx.beginPath();
-      ctx.moveTo(117, 0);
-      ctx.lineTo(120, 0);
-      ctx.stroke();
-    }
-    ctx.rotate(Math.PI / 30);
-  }
-  ctx.restore();
-
-  var sec = now.getSeconds();
-  var min = now.getMinutes();
-  var hr  = now.getHours();
-  hr = hr >= 12 ? hr - 12 : hr;
-
-  ctx.fillStyle = 'black';
-
-  // write Hours
-  ctx.save();
-  ctx.rotate(hr * (Math.PI / 6) + (Math.PI / 360) * min + (Math.PI / 21600) *sec);
-  ctx.lineWidth = 14;
-  ctx.beginPath();
-  ctx.moveTo(-20, 0);
-  ctx.lineTo(80, 0);
-  ctx.stroke();
-  ctx.restore();
-
-  // write Minutes
-  ctx.save();
-  ctx.rotate((Math.PI / 30) * min + (Math.PI / 1800) * sec);
-  ctx.lineWidth = 10;
-  ctx.beginPath();
-  ctx.moveTo(-28, 0);
-  ctx.lineTo(112, 0);
-  ctx.stroke();
-  ctx.restore();
-
-  // Write seconds
-  ctx.save();
-  ctx.rotate(sec * Math.PI / 30);
-  ctx.strokeStyle = '#D40000';
-  ctx.fillStyle = '#D40000';
-  ctx.lineWidth = 6;
-  ctx.beginPath();
-  ctx.moveTo(-30, 0);
-  ctx.lineTo(83, 0);
-  ctx.stroke();
-  ctx.beginPath();
-  ctx.arc(0, 0, 10, 0, Math.PI * 2, true);
-  ctx.fill();
-  ctx.beginPath();
-  ctx.arc(95, 0, 10, 0, Math.PI * 2, true);
-  ctx.stroke();
-  ctx.fillStyle = 'rgba(0, 0, 0, 0)';
-  ctx.arc(0, 0, 3, 0, Math.PI * 2, true);
-  ctx.fill();
-  ctx.restore();
-
-  ctx.beginPath();
-  ctx.lineWidth = 14;
-  ctx.strokeStyle = '#325FA2';
-  ctx.arc(0, 0, 142, 0, Math.PI * 2, true);
-  ctx.stroke();
-
-  ctx.restore();
-
-  window.requestAnimationFrame(clock);
-}
-
-window.requestAnimationFrame(clock);
- - - -

{{EmbedLiveSample("An_animated_clock", "180", "180", "https://mdn.mozillademos.org/files/203/Canvas_animation2.png")}}

- -

A looping panorama

- -

In this example, a panorama is scrolled left-to-right. We're using an image of Yosemite National Park we took from Wikipedia, but you could use any image that's larger than the canvas.

- -
var img = new Image();
-
-// User Variables - customize these to change the image being scrolled, its
-// direction, and the speed.
-
-img.src = 'https://mdn.mozillademos.org/files/4553/Capitan_Meadows,_Yosemite_National_Park.jpg';
-var CanvasXSize = 800;
-var CanvasYSize = 200;
-var speed = 30; // lower is faster
-var scale = 1.05;
-var y = -4.5; // vertical offset
-
-// Main program
-
-var dx = 0.75;
-var imgW;
-var imgH;
-var x = 0;
-var clearX;
-var clearY;
-var ctx;
-
-img.onload = function() {
-    imgW = img.width * scale;
-    imgH = img.height * scale;
-
-    if (imgW > CanvasXSize) { x = CanvasXSize - imgW; } // image larger than canvas
-    if (imgW > CanvasXSize) { clearX = imgW; } // image width larger than canvas
-    else { clearX = CanvasXSize; }
-    if (imgH > CanvasYSize) { clearY = imgH; } // image height larger than canvas
-    else { clearY = CanvasYSize; }
-
-    // get canvas context
-    ctx = document.getElementById('canvas').getContext('2d');
-
-    // set refresh rate
-    return setInterval(draw, speed);
-}
-
-function draw() {
-    ctx.clearRect(0, 0, clearX, clearY); // clear the canvas
-
-    // if image is <= Canvas Size
-    if (imgW <= CanvasXSize) {
-        // reset, start from beginning
-        if (x > CanvasXSize) { x = -imgW + x; }
-        // draw additional image1
-        if (x > 0) { ctx.drawImage(img, -imgW + x, y, imgW, imgH); }
-        // draw additional image2
-        if (x - imgW > 0) { ctx.drawImage(img, -imgW * 2 + x, y, imgW, imgH); }
-    }
-
-    // if image is > Canvas Size
-    else {
-        // reset, start from beginning
-        if (x > (CanvasXSize)) { x = CanvasXSize - imgW; }
-        // draw aditional image
-        if (x > (CanvasXSize-imgW)) { ctx.drawImage(img, x - imgW + 1, y, imgW, imgH); }
-    }
-    // draw image
-    ctx.drawImage(img, x, y,imgW, imgH);
-    // amount to move
-    x += dx;
-}
-
- -

Below is the {{HTMLElement("canvas")}} in which the image is scrolled. Note that the width and height specified here must match the values of the CanvasXZSize and CanvasYSize variables in the JavaScript code.

- -
<canvas id="canvas" width="800" height="200"></canvas>
- -

{{EmbedLiveSample("A_looping_panorama", "830", "230")}}

- -

Other examples

- -
-
A basic ray-caster
-
A good example of how to do animations using keyboard controls.
-
Advanced animations
-
We will have a look at some advanced animation techniques and physics in the next chapter.
-
- -

{{PreviousNext("Web/API/Canvas_API/Tutorial/Compositing", "Web/API/Canvas_API/Tutorial/Advanced_animations")}}

diff --git a/files/de/web/guide/html/canvas_tutorial/bilder/index.html b/files/de/web/guide/html/canvas_tutorial/bilder/index.html deleted file mode 100644 index b636807f97..0000000000 --- a/files/de/web/guide/html/canvas_tutorial/bilder/index.html +++ /dev/null @@ -1,324 +0,0 @@ ---- -title: Bilder -slug: Web/Guide/HTML/Canvas_Tutorial/Bilder -translation_of: Web/API/Canvas_API/Tutorial/Using_images ---- -

{{CanvasSidebar}}

- -

Natürlich können auch Bilder gezeichnet werden. Diese können die unterschiedlichsten Formate haben: PNG, GIF, JPEG oder bestimmte HTML Elemente.

- -

Um Bilder zu importieren bedarf es bloß zwei Schritte:

- -
    -
  1. Ein {{domxref("HTMLImageElement")}} Objekt erzeugen oder das HTML Element selektieren.
    2. -
  2. Das Bild mithilfe der drawImage() Funktion zeichnen.
    3. -
- -

Bilder importieren

- -

Die canvas API unterstützt folgende Typen als Bilder:

- -
-
{{domxref("HTMLImageElement")}}
-
Diese Bilder können mithilfe des Image() Konstruktor oder mithilfe eines {{HTMLElement("img")}} Element erstellt werden.
-
{{domxref("HTMLVideoElement")}}
-
Der aktuelle Frame des {{HTMLElement("video")}} Element wird als Bild genutzt.
-
{{domxref("HTMLCanvasElement")}}
-
Ein anderes {{HTMLElement("canvas")}} Element kann ebenfalls als Bild dienen.
-
{{domxref("ImageBitmap")}}
-
Eine hochleistungsfähige Bitmap, welche mit niedriger Verzögerung gerendert werden kann. Sie lässt sich aus allen der oben genannten Quellen, sowie aus mehreren weitern erstellen.
-
- -

These sources are collectively referred to by the type {{domxref("CanvasImageSource")}}.

- -

There are several ways to get images for use on a canvas.

- -

Bilder von derselben Seite

- -

Um Bilder von derselben Seite zu bekommen, können diese Methoden genutzt werden:

- - - -

Bilder von anderen Seiten nutzen

- -

Mithilfe des {{htmlattrxref("crossorigin", "img")}} Attributs eines {{domxref("HTMLImageElement")}} ist es möglich die Erlaubnis zur Benutzung eines Bildes von einer anderen Domain zu nutzen. Wenn die Domain jenen Zugriff gestattet, kann das Image genutzt werden und das Bild wird wie gewollt angezeigt; andernfalls entsteht ein "getaintes Canvas".

- -

Andere Canvas Elemente benutzen

- -

Genau wie normalen Bildern auch, können wir ein anderes Canvas durch {{domxref("document.getElementsByTagName()")}} oder {{domxref("document.getElementById()")}} ansprechen.

- -

Sei dabei sicher, dass du auf deinem Canvas etwas gezeichnet hast, bevor du es im Zielcanvas verwendest.

- -

Eine sinnvoller Einsatz ist zum Beispiel das zweite Canvas als Vorschaubild (Thumbnail) des ersten zu verwenden.

- -

Ein Bild von Grund auf

- -

Eine andere Option ist ein neues {{domxref("HTMLImageElement")}} in JavaScript zu erstellen. Um das zu tun, können wir den Image()-Konstruktor verwenden:

- -
var img = new Image(); // Erstelle neues Image-Objekt
-img.src = 'myImage.png'; // Setze den Pfad zum Bild
- -

Wird dieses Skript ausgeführt, fängt das Bild an zu laden.

- -
-

Achtung: Wenn drawImage() vor dem Laden des Bildes ausgeführt wird, wird nichts passieren (In älteren Browsern kann es eine Fehlermeldung geben). Um jenen Fehler zu vermeiden, muss also sichergestellt werden, dass das load-Event benutzt wird.

-
- -
var img = new Image();   // Erstelle neues Image-Objekt
-img.addEventListener("load", function() {
-  // füge hier den drawImage()-Befehl ein
-}, false);
-img.src = 'myImage.png'; // Setze den Pfad zum Bild
-
- -

Wenn nur ein externes Bild geladen werden muss, ist das eine gute Möglichkeit. Wenn jedoch mehrere Bilder benötigt werden, sollte es besser anders gelöst werden. Es ist nicht das Ziel deises Tutorials auf das Vorladen von Bildern einzugehen, aber für eine komplette Lösung kannst du dir JavaScript Image Preloader angucken (ist leder auf Englisch).

- -

Embedding an image via data: URL

- -

Another possible way to include images is via the data: url. Data URLs allow you to completely define an image as a Base64 encoded string of characters directly in your code.

- -
var img_src = 'data:image/gif;base64,R0lGODlhCwALAIAAAAAA3pn/ZiH5BAEAAAEALAAAAAALAAsAAAIUhA+hkcuO4lmNVindo7qyrIXiGBYAOw==';
-
- -

One advantage of data URLs is that the resulting image is available immediately without another round trip to the server. Another potential advantage is that it is also possible to encapsulate in one file all of your CSS, JavaScript, HTML, and images, making it more portable to other locations.

- -

Some disadvantages of this method are that your image is not cached, and for larger images the encoded url can become quite long.

- -

Using frames from a video

- -

You can also use frames from a video being presented by a {{HTMLElement("video")}} element (even if the video is not visible). For example, if you have a {{HTMLElement("video")}} element with the ID "myvideo", you can do this:

- -
function getMyVideo() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
-
-    return document.getElementById('myvideo');
-  }
-}
-
- -

This returns the {{domxref("HTMLVideoElement")}} object for the video, which, as covered earlier, is one of the objects that can be used as a CanvasImageSource.

- -

Drawing images

- -

Once we have a reference to our source image object we can use the drawImage() method to render it to the canvas. As we will see later the drawImage() method is overloaded and has several variants. In its most basic form it looks like this:

- -
-
drawImage(image, x, y)
-
Draws the CanvasImageSource specified by the image parameter at the coordinates (x, y).
-
- -

Example: A simple line graph

- -

In the following example, we will use an external image as the backdrop for a small line graph. Using backdrops can make your script considerably smaller because we can avoid the need for code to generate the background. In this example, we're only using one image, so I use the image object's load event handler to execute the drawing statements. The drawImage() method places the backdrop at the coordinate (0, 0), which is the top-left corner of the canvas.

- - - -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  var img = new Image();
-  img.onload = function(){
-    ctx.drawImage(img,0,0);
-    ctx.beginPath();
-    ctx.moveTo(30,96);
-    ctx.lineTo(70,66);
-    ctx.lineTo(103,76);
-    ctx.lineTo(170,15);
-    ctx.stroke();
-  };
-  img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png';
-}
- -

The resulting graph looks like this:

- -

{{EmbedLiveSample("Example_A_simple_line_graph", 220, 160, "https://mdn.mozillademos.org/files/206/Canvas_backdrop.png")}}

- -

Scaling

- -

The second variant of the drawImage() method adds two new parameters and lets us place scaled images on the canvas.

- -
-
drawImage(image, x, y, width, height)
-
This adds the width and height parameters, which indicate the size to which to scale the image when drawing it onto the canvas.
-
- -

Example: Tiling an image

- -

In this example, we'll use an image as a wallpaper and repeat it several times on the canvas. This is done simply by looping and placing the scaled images at different positions. In the code below, the first for loop iterates over the rows. The second for loop iterates over the columns. The image is scaled to one third of its original size, which is 50x38 pixels.

- -
-

Note: Images can become blurry when scaling up or grainy if they're scaled down too much. Scaling is probably best not done if you've got some text in it which needs to remain legible.

-
- - - -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  var img = new Image();
-  img.onload = function(){
-    for (var i=0;i<4;i++){
-      for (var j=0;j<3;j++){
-        ctx.drawImage(img,j*50,i*38,50,38);
-      }
-    }
-  };
-  img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';
-}
- -

The resulting canvas looks like this:

- -

{{EmbedLiveSample("Example_Tiling_an_image", 160, 160, "https://mdn.mozillademos.org/files/251/Canvas_scale_image.png")}}

- -

Slicing

- -

The third and last variant of the drawImage() method has eight parameters. It lets us cut out a section of the source image, then scale and draw it on our canvas.

- -
-
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
-
Given an image, this function takes the area of the source image specified by the rectangle whose top-left corner is (sx, sy) and whose width and height are sWidth and sHeight and draws it into the canvas, placing it on the canvas at (dx, dy) and scaling it to the size specified by dWidth and dHeight.
-
- -

To really understand what this does, it may help to look at the image to the right. The first four parameters define the location and size of the slice on the source image. The last four parameters define the rectangle into which to draw the image on the destination canvas.

- -

Slicing can be a useful tool when you want to make compositions. You could have all elements in a single image file and use this method to composite a complete drawing. For instance, if you want to make a chart you could have a PNG image containing all the necessary text in a single file and depending on your data could change the scale of your chart fairly easily. Another advantage is that you don't need to load every image individually, which can improve load performance.

- -

Example: Framing an image

- -

In this example, we'll use the same rhino as in the previous example, but we'll slice out its head and composite it into a picture frame. The picture frame image is a 24-bit PNG which includes a drop shadow. Because 24-bit PNG images include a full 8-bit alpha channel, unlike GIF and 8-bit PNG images, it can be placed onto any background without worrying about a matte color.

- -
<html>
- <body onload="draw();">
-   <canvas id="canvas" width="150" height="150"></canvas>
-   <div style="display:none;">
-     <img id="source" src="https://mdn.mozillademos.org/files/5397/rhino.jpg" width="300" height="227">
-     <img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150">
-   </div>
- </body>
-</html>
-
- -
function draw() {
-  var canvas = document.getElementById('canvas');
-  var ctx = canvas.getContext('2d');
-
-  // Draw slice
-  ctx.drawImage(document.getElementById('source'),
-                33, 71, 104, 124, 21, 20, 87, 104);
-
-  // Draw frame
-  ctx.drawImage(document.getElementById('frame'),0,0);
-}
- -

We took a different approach to loading the images this time. Instead of loading them by creating new {{domxref("HTMLImageElement")}} objects, we included them as {{HTMLElement("img")}} tags directly in our HTML source and retrieved the images from those. The images are hidden from output by setting the CSS property {{cssxref("display")}} to none for those images.

- -

{{EmbedLiveSample("Example_Framing_an_image", 160, 160, "https://mdn.mozillademos.org/files/226/Canvas_drawimage2.jpg")}}

- -

The script itself is very simple. Each {{HTMLElement("img")}} is assigned an ID attribute, which makes them easy to select using {{domxref("document.getElementById()")}}. We then simply use drawImage() to slice the rhino out of the first image and scale him onto the canvas, then draw the frame on top using a second drawImage() call.

- - - -

In the final example of this chapter, we'll build a little art gallery. The gallery consists of a table containing several images. When the page is loaded, a {{HTMLElement("canvas")}}  element is inserted for each image and a frame is drawn arround it.

- -

In this case, every image has a fixed width and height, as does the frame that's drawn around them. You could enhance the script so that it uses the image's width and height to make the frame fit perfectly around it.

- -

The code below should be self-explanatory. We loop through the {{domxref("document.images")}} container and add new canvas elements accordingly. Probably the only thing to note, for those not so familiar with the DOM, is the use of the {{domxref("Node.insertBefore")}} method. insertBefore() is a method of the parent node (a table cell) of the element (the image) before which we want to insert our new node (the canvas element).

- -
<html>
- <body onload="draw();">
-     <table>
-      <tr>
-        <td><img src="https://mdn.mozillademos.org/files/5399/gallery_1.jpg"></td>
-        <td><img src="https://mdn.mozillademos.org/files/5401/gallery_2.jpg"></td>
-        <td><img src="https://mdn.mozillademos.org/files/5403/gallery_3.jpg"></td>
-        <td><img src="https://mdn.mozillademos.org/files/5405/gallery_4.jpg"></td>
-      </tr>
-      <tr>
-        <td><img src="https://mdn.mozillademos.org/files/5407/gallery_5.jpg"></td>
-        <td><img src="https://mdn.mozillademos.org/files/5409/gallery_6.jpg"></td>
-        <td><img src="https://mdn.mozillademos.org/files/5411/gallery_7.jpg"></td>
-        <td><img src="https://mdn.mozillademos.org/files/5413/gallery_8.jpg"></td>
-      </tr>
-     </table>
-     <img id="frame" src="https://mdn.mozillademos.org/files/242/Canvas_picture_frame.png" width="132" height="150">
- </body>
-</html>
-
- -

And here's some CSS to make things look nice:

- -
body {
-  background: 0 -100px repeat-x url(https://mdn.mozillademos.org/files/5415/bg_gallery.png) #4F191A;
-  margin: 10px;
-}
-
-img {
-  display: none;
-}
-
-table {
-  margin: 0 auto;
-}
-
-td {
-  padding: 15px;
-}
-
- -

Tying it all together is the JavaScript to draw our framed images:

- -
function draw() {
-
-  // Loop through all images
-  for (var i=0;i<document.images.length;i++){
-
-    // Don't add a canvas for the frame image
-    if (document.images[i].getAttribute('id')!='frame'){
-
-      // Create canvas element
-      canvas = document.createElement('canvas');
-      canvas.setAttribute('width',132);
-      canvas.setAttribute('height',150);
-
-      // Insert before the image
-      document.images[i].parentNode.insertBefore(canvas,document.images[i]);
-
-      ctx = canvas.getContext('2d');
-
-      // Draw image to canvas
-      ctx.drawImage(document.images[i],15,20);
-
-      // Add frame
-      ctx.drawImage(document.getElementById('frame'),0,0);
-    }
-  }
-}
- -

{{EmbedLiveSample("Art_gallery_example", 725, 400, "https://mdn.mozillademos.org/files/205/Canvas_art_gallery.jpg")}}

- -

Controlling image scaling behavior

- -

As mentioned previously, scaling images can result in fuzzy or blocky artifacts due to the scaling process. You can use the drawing context's imageSmoothingEnabled property to control the use of image smoothing algorithms when scaling images within your context. By default, this is true, meaning images will be smoothed when scaled. You can disable this feature like this:

- -
ctx.mozImageSmoothingEnabled = false;
-
- -

{{PreviousNext("Web/Guide/HTML/Canvas_tutorial/Drawing_shapes", "Web/Guide/HTML/Canvas_tutorial/Applying_styles_and_colors")}}

diff --git a/files/de/web/guide/html/canvas_tutorial/canvas_optimieren/index.html b/files/de/web/guide/html/canvas_tutorial/canvas_optimieren/index.html deleted file mode 100644 index fc1678c71a..0000000000 --- a/files/de/web/guide/html/canvas_tutorial/canvas_optimieren/index.html +++ /dev/null @@ -1,118 +0,0 @@ ---- -title: Canvas optimieren -slug: Web/Guide/HTML/Canvas_Tutorial/Canvas_optimieren -tags: - - Canvas - - Fortgeschritten - - Grafik - - HTML - - HTML5 - - Tutorial -translation_of: Web/API/Canvas_API/Tutorial/Optimizing_canvas ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}
- -
-

Das {{HTMLElement("canvas")}}-Element ist einer der am meisten verbreiteten Standards, um 2D-Grafiken im Web zu erzeugen. Es wird oft für Spiele und komplexe Visualisierungen eingesetzt. Reizen Webseiten und Apps das Canvas jedoch zu sehr aus, lässt die Performance nach. Dieser Artikel soll Hilfestellung für die Optimierung der Nutzung des Canvas-Elements geben, um sicherzustellen, dass Ihre Webseite oder App performant ist.

-
- -

Tipps zur Performance

- -

Dies ist eine Sammlung von Tipps, die Helfen, die Performance zu verbessern.

- -

Vorrendern von ähnlichen oder sich wiederholenden Objekten auf einem Offscreen-Canvas

- -

Falls Sie komplexe Zeichenoperationen in jedem Frame ausführen, ziehen Sie in Betracht, ein Offscreen-Canvas zu erzeugen. Damit können Sie Objekte einmal (oder wann immer Änderungen stattfinden) auf dem Offscreen-Canvas zeichnen und in jedem Frame das Offscreen-Canvas zeichnen.

- -
myEntity.offscreenCanvas = document.createElement('canvas');
-myEntity.offscreenCanvas.width = myEntity.width;
-myEntity.offscreenCanvas.height = myEntity.height;
-myEntity.offscreenContext = myEntity.offscreenCanvas.getContext('2d');
-
-myEntity.render(myEntity.offscreenContext);
-
- -

Vermeiden Sie Gleitkomma-Koordinaten

- -

Falls Sie Objekte auf dem Canvas mit Gleitkommazahlen als Koordinaten zeichnen, müssen Subpixel gerendert werden.

- -
ctx.drawImage(myImage, 0.3, 0.5);
-
- -

Dadurch muss der Browser zusätzliche Berechnungen durchführen, um eine Kantenglättung zu erzielen. Um dies zu verhindern, stellen Sie sicher, dass Sie alle Koordinaten in Aufrufen von {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}} runden, zum Beispiel mit Hilfe von {{jsxref("Math.floor()")}}.

- -

Skalieren Sie keine Bilder in drawImage

- -

Laden Sie mehrere Größen Ihrer Bilder auf ein Offscreen-Canvas, anstatt sie andauernd in {{domxref("CanvasRenderingContext2D.drawImage", "drawImage()")}} zu skalieren.

- -

Benutzen Sie mehrere Canvas-Ebenen für komplexe Szenen

- -

Möglicherweise haben Sie einige Elemente, die sich oft ändern oder bewegen, während andere Dinge (wie zum Beispiel die UI) sich nie ändern. Diese Situation können Sie optimieren, indem Sie durch die Erzeugung mehrerer Canvas-Elemente Ebenen erzeugen.

- -

Zum Beispiel können Sie eine UI-Ebene erzeugen, die über allen anderen Ebenen liegt und nur während Benutzereingaben gezeichnet wird. Zusätzlich kann es eine Spiel-Ebene geben, die alle oft veränderten Objekte enthält, sowie eine Hintergrund-Ebene, deren Objekte sich selten ändern.

- -
<div id="stage">
-  <canvas id="ui-layer" width="480" height="320"></canvas>
-  <canvas id="game-layer" width="480" height="320"></canvas>
-  <canvas id="background-layer" width="480" height="320"></canvas>
-</div>
-
-<style>
-  #stage {
-    width: 480px;
-    height: 320px;
-    position: relative;
-    border: 2px solid black
-  }
-  canvas { position: absolute; }
-  #ui-layer { z-index: 3 }
-  #game-layer { z-index: 2 }
-  #background-layer { z-index: 1 }
-</style>
-
- -

Nutzen Sie CSS für große Hintergrundbilder

- -

Falls Sie wie die meisten Spiele ein statisches Hintergrundbild haben, nutzen Sie ein simples {{HTMLElement("div")}}-Element mit der CSS-Eigenschaft {{cssxref("background")}} und positionieren Sie es unter dem Canvas. Dadurch verhindern Sie ein permanentes Neuzeichnen des Bildes in jedem Frame.

- -

Skalieren Sie das Canvas mit CSS-Transformationen

- -

CSS-Transformationen sind schneller, da sie die Grafikkarte nutzen. Im besten Fall skalieren Sie das Canvas nicht, oder haben ein kleineres Canvas, das Sie hochskalieren, als dass Sie ein großes Canvas herunterskalieren. Für Firefox OS ist die Zielgröße 480 x 320 px.

- -
var scaleX = window.innerWidth / canvas.width;
-var scaleY = window.innerHeight / canvas.height;
-
-var scaleToFit = Math.min(scaleX, scaleY);
-var scaleToCover = Math.max(scaleX, scaleY);
-
-stage.style.transformOrigin = '0 0'; //scale from top left
-stage.style.transform = 'scale(' + scaleToFit + ')';
-
- -

Nutzen Sie das moz-opaque Attribut (nur Gecko)

- -

Falls Ihr Spiel ein Canvas nutzt, das nicht transparent sein muss, setzen Sie das moz-opaque Attribut im Canvas-Tag. Diese Information kann intern genutzt werden, um das Zeichnen zu optimieren.

- -
<canvas id="myCanvas" moz-opaque></canvas>
- -

Weitere Tipps

- - - -

Siehe auch

- - - -

{{PreviousNext("Web/API/Canvas_API/Tutorial/Hit_regions_and_accessibility", "Web/API/Canvas_API/Tutorial/Finale")}}

diff --git a/files/de/web/guide/html/canvas_tutorial/drawing_text/index.html b/files/de/web/guide/html/canvas_tutorial/drawing_text/index.html deleted file mode 100644 index 1cd3f0bfc6..0000000000 --- a/files/de/web/guide/html/canvas_tutorial/drawing_text/index.html +++ /dev/null @@ -1,165 +0,0 @@ ---- -title: Text zeichnen -slug: Web/Guide/HTML/Canvas_Tutorial/Drawing_text -tags: - - Canvas - - Fortgeschritten - - Grafik - - Tutorial -translation_of: Web/API/Canvas_API/Tutorial/Drawing_text ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}
- -
-

Nachdem wir im vorigen Kapitel gesehen haben, wie man Gestaltung und Farben anwendet , werden wir nun einen Blick darauf werfen, wie man Text auf ein canvas zeichnet.

-
- -

Text zeichnen

- -

Der Rendering-Kontext hält zwei Methoden zum zeichnen von Text bereit:

- -
-
{{domxref("CanvasRenderingContext2D.fillText", "fillText(text, x, y [, maxWidth])")}}
-
Füllt einen gegebenen Text an den gegebenen (x,y)-Koordinaten. Optional mit einer maximalen Breite, die zu zeichnen ist.
-
{{domxref("CanvasRenderingContext2D.strokeText", "strokeText(text, x, y [, maxWidth])")}}
-
Umrandet einen gegebenen Text an den gegebenen (x,y)-Koordinaten. Optional mit einer maximalen Breite, die zu zeichnen ist.
-
- -

ein fillText-Beispiel

- -

Der Text wird mit dem aktuellen fillStyle gefüllt.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  ctx.font = '48px serif';
-  ctx.fillText('Hello world', 10, 50);
-}
- - - -

{{EmbedLiveSample("A_fillText_example", 310, 110)}}

- -

ein strokeText-Beispiel

- -

Der Text wird mit dem aktuellen strokeStyle umrandet.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  ctx.font = '48px serif';
-  ctx.strokeText('Hello world', 10, 50);
-}
- - - -

{{EmbedLiveSample("A_strokeText_example", 310, 110)}}

- -

Text gestalten

- -

In den obigen Beispielen nutzen wir bereits die font-Eigentschaft, um den Text ein wenig größer als standardmäßig zu machen. Es gibt ein paar mehr Eigenschaften, die es erlauben, das Zeichnen von Text auf dem canvas zu beeinflussen:

- -
-
{{domxref("CanvasRenderingContext2D.font", "font = value")}}
-
Der aktuell genutzte Text-Stil, der zum Zeichnen genutzt wird. Dieser String nutzt die selbe Syntax wie die CSS {{cssxref("font")}}-Eigenschaft. Die Standard-Schriftart ist 10px sans-serif.
-
{{domxref("CanvasRenderingContext2D.textAlign", "textAlign = value")}}
-
Einstellung der Text-Ausrichtung. Mögliche Werte: start, end, left, right oder center. Der Standard-Wert ist start.
-
{{domxref("CanvasRenderingContext2D.textBaseline", "textBaseline = value")}}
-
Baseline alignment setting. Possible values: top, hanging, middle, alphabetic, ideographic, bottom. The default value is alphabetic.
-
{{domxref("CanvasRenderingContext2D.direction", "direction = value")}}
-
Directionality. Possible values: ltr, rtl, inherit. The default value is inherit.
-
- -

These properties might be familiar to you, if you have worked with CSS before.

- -

The following diagram from the WHATWG demonstrates the various baselines supported by the textBaseline property.The top of the em square is -roughly at the top of the glyphs in a font, the hanging baseline is -where some glyphs like आ are anchored, the middle is half-way -between the top of the em square and the bottom of the em square, -the alphabetic baseline is where characters like Á, ÿ, -f, and Ω are anchored, the ideographic baseline is -where glyphs like 私 and 達 are anchored, and the bottom -of the em square is roughly at the bottom of the glyphs in a -font. The top and bottom of the bounding box can be far from these -baselines, due to glyphs extending far outside the em square.

- -

A textBaseline example

- -

Edit the code below and see your changes update live in the canvas:

- -
ctx.font = '48px serif';
-ctx.textBaseline = 'hanging';
-ctx.strokeText('Hello world', 0, 100);
-
- - - -

{{ EmbedLiveSample('Playable_code', 700, 360) }}

- -

Advanced text measurements

- -

In the case you need to obtain more details about the text, the following method allows you to measure it.

- -
-
{{domxref("CanvasRenderingContext2D.measureText", "measureText()")}}
-
Returns a {{domxref("TextMetrics")}} object containing the width, in pixels, that the specified text will be when drawn in the current text style.
-
- -

The following code snippet shows how you can measure a text and get its width.

- -
function draw() {
-  var ctx = document.getElementById('canvas').getContext('2d');
-  var text = ctx.measureText('foo'); // TextMetrics object
-  text.width; // 16;
-}
-
- -

Gecko-specific notes

- -

In Gecko (the rendering engine of Firefox, Firefox OS and other Mozilla based applications), some prefixed APIs were implemented in earlier versions to draw text on a canvas. These are now deprecated and removed, and are no longer guaranteed to work.

- -

{{PreviousNext("Web/API/Canvas_API/Tutorial/Applying_styles_and_colors", "Web/API/Canvas_API/Tutorial/Using_images")}}

diff --git a/files/de/web/guide/html/canvas_tutorial/formen_zeichnen/index.html b/files/de/web/guide/html/canvas_tutorial/formen_zeichnen/index.html deleted file mode 100644 index f23e7664b5..0000000000 --- a/files/de/web/guide/html/canvas_tutorial/formen_zeichnen/index.html +++ /dev/null @@ -1,453 +0,0 @@ ---- -title: Formen zeichnen mit Canvas -slug: Web/Guide/HTML/Canvas_Tutorial/Formen_zeichnen -translation_of: Web/API/Canvas_API/Tutorial/Drawing_shapes ---- -

{{CanvasSidebar}}

- -

Koordinatensystem

- -

Bevor wir mit dem Zeichnen beginnen können, müssen wir über das canvas grid oder Koordinatensystem sprechen. Unser HTML-Skelett von der vorigen Seite hatte ein canvas-Element mit den Maßen 150 Pixel Höhe und 150 Pixel Breite. Zur Rechten sieht man diesen canvas, über den das Standard-Grid gelegt wurde. Normalerweise entspricht eine Einheit einem Pixel auf dem canvas. Der Ursprung dieses Rasters befindet sich in der oberen linken Ecke, im Punkt (0,0). Alle Elemente werden relativ zum Ursprung positioniert. Die Position des blauen Quadrates ist also x Pixel vom linken Rand und y Pixel vom oberen Rand entfernt, am Punkt (x,y). Später in diesem Tutorial werden wir sehen, wie wir den Ursprung an eine andere Position verschieben, das Koordinatensystem rotieren und sogar skalieren können, aber für's Erste behalten wir die Standardeinstellungen bei.

- -

Rechtecke zeichnen

- -

Nicht wie in SVG, unterstützt {{HTMLElement("canvas")}} nur eine einfache Form: das Rechteck. Andere Formen werden mithilfe von Pfaden gezeichnet, dazu später mehr.

- -
-

Es gibt drei Funktionen, welche auf verschiedenste Art Rechtecke zeichnen:

- -
-
fillRect(x, y, breite, höhe)
-
Zeichnet ein gefülltes Rechteck
-
strokeRect(x, y, breite, höhe)
-
Zeichnet den Rahmen eines Rechteckes
-
clearRect(x, y, breite, höhe)
-
Der Bereich des Rechteckes wird transparent
-
- -

Alle drei Funktionen benötigen die selben drei Argumente. x und y beschreibt die Position (siehe Koordinatensystem). breite und höhe beschreiben die Größe des Rechteckes.

- -

Beispiel mit Rechtecken

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
-
-    ctx.fillRect(25, 25, 100, 100);
-    ctx.clearRect(45, 45, 60, 60);
-    ctx.strokeRect(50, 50, 50, 50);
-  }
-}
- -

Demo:

- -

{{EmbedLiveSample("Beispiel_mit_Rechtecken", 160, 160, "https://mdn.mozillademos.org/files/245/Canvas_rect.png")}}

- -

Die fillRect()-Methode zeichnet ein 100px großes, schwarzes Quadrat. Die clearRect()-Methode löscht danach ein 60px großes Quadrat in der Mitte des schwarzen Quadrates. Anschließend zeichnet die strokeRect()-Methode einen 50px großen schwarzen Rahmen in der Mitte.

- -

Später werden wir zwei alternative Methoden für clearRect() behandeln und sehen, wie man die Füll- und Konturfarbe ändern kann.

- -

Anders als die Pfadmethoden zeichnen diese drei Rechteckmethoden sofort auf den canvas.

- -

Pfade zeichnen

- -

Um andere Formen mithilfe von Pfaden zu zeichnen, benötigt man einige weitere Schritte. Zuerst muss man einen Pfad beginnen. Danach kommen die Pfadbefehle. Zuletzt wird dieser gezeichnet oder gefüllt. Diese Methoden werden hierfür genutzt:

- -
-
beginPath()
-
Erstellt einen Pfad und beendet ggf. einen älteren.
-
closePath()
-
Beendet den Pfad und verbindet den Startpunkt mit dem Endpunkt.
-
stroke()
-
Zeichnet die Kontur des Pfades.
-
fill()
-
Zeichnet die Füllung des Pfades.
-
- -

Zuerst wird also die beginPath()-Methode ausgeführt. Danach kommen weitere Pfadanweisung wie Linien oder Kurven. Ein weiterer Aufruf der Methode beginPath() oder ein Aufruf der Methode closePath() löscht die Pfadanweisungen. Optional kann nun closePath() ausgeführt werden.

- -
Hinweis: Wenn fill() ausgeführt wird, wird automatisch der Pfad beendet, sodass closePath() nicht mehr ausgeführt werden muss. Da ist nicht der Fall wenn stroke() ausgeführt wird.
- -

Ein Dreieck zeichnen

- -

So sähe zum Beispiel der Code aus, um ein Dreieck zu zeichnen:

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
-
-    ctx.beginPath();
-    ctx.moveTo(75, 50);
-    ctx.lineTo(100, 75);
-    ctx.lineTo(100, 25);
-    ctx.fill();
-  }
-}
- -

Demo:

- -

{{EmbedLiveSample("Ein_Dreieck_zeichnen", 160, 160)}}

- -

Stift bewegen

- -

Eine sehr sinnvolle Methode ist moveTo(). Sie zeichnet zwar nichts, verändert allerdings die Position des Stiftes, sodass spätere Methoden nicht beim Punkt (0, 0) anfangen.

- -
-
moveTo(x, y)
-
Bewegt den Stift zu der Koordinate (x , y).
-
- -

Meist wird direkt nach dem Aufruf von beginPath() moveTo() ausgeführt. Außerdem kann man moveTo() für nichtverbundene Pfade benutzen. Beispiel (moveTo()-Aufrufe sind rote Linien):

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-     var ctx = canvas.getContext('2d');
-
-     ctx.beginPath();
-     ctx.arc(75, 75, 50, 0, Math.PI * 2, true); // Outer circle
-     ctx.moveTo(110, 75);
-     ctx.arc(75, 75, 35, 0, Math.PI, false);    // Mund
-     ctx.moveTo(65, 65);
-     ctx.arc(60, 65, 5, 0, Math.PI * 2, true);  // Linkes Auge
-     ctx.moveTo(95, 65);
-     ctx.arc(90, 65, 5, 0, Math.PI * 2, true);  // Rechtes Auge
-     ctx.stroke();
-  }
-}
- -

Demo:

- -

{{EmbedLiveSample("Stift_bewegen", 160, 160, "https://mdn.mozillademos.org/files/252/Canvas_smiley.png")}}

- -
-

Hinweis: arc() zeichnet einen Kreisbogen. Mehr dazu: {{anch("Kreisbögen")}}.

-
- -

Linien

- -

Für Linien verwendet man die lineTo()-Methode:

- -
-
lineTo(x, y)
-
Zeichnet eine Linie von der aktuellen Stiftposition zu dem Punkt (x, y).
-
- -

Diese Methode erwartet wie moveTo() zwei Argumente: x und y, welche die Koordinate des Linienendes ist. Der Startpunkt wurde Mithilfe anderer Methoden schon festgelegt. Anschließend ist das Linienende der neue Startpunkt.

- -

Beispiel mit zwei Dreiecken:

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
-
-    // Filled triangle
-    ctx.beginPath();
-    ctx.moveTo(25, 25);
-    ctx.lineTo(105, 25);
-    ctx.lineTo(25, 105);
-    ctx.fill();
-
-    // Stroked triangle
-    ctx.beginPath();
-    ctx.moveTo(125, 125);
-    ctx.lineTo(125, 45);
-    ctx.lineTo(45, 125);
-    ctx.closePath();
-    ctx.stroke();
-  }
-}
- -

Es beginnt mit der Ausführung von beginPath() um eine neue Form zu beginnen. Danach wird mit moveTo() der Startpunkt festgelegt. Danach werden die Linien gezeichnet.

- -

{{EmbedLiveSample("Linien", 160, 160, "https://mdn.mozillademos.org/files/238/Canvas_lineTo.png")}}

- -

Kreisbögen

- -

Um Kreise oder Kreisbögen zu zeichnen, benutzt man die arc()-Methode.

- -
-
arc(x, y, radius, startWinkel, endWinkel, uhrzeigersinn)
-
Zeichnet einen Kreisbogen.
-
- -

Diese Methode benötigt sechs Parameter: x und y sind die Koordinaten des Mittelpunktes des Kreisbogens. radius ist der Radius des Kreisbogens. startWinkel und endWinkel definieren die Punkte auf dem Kreis in rad. Der uhrzeigersinn-Parameter ist true, wenn der Kreisbogen gegen den Uhrzeigersinn und false wenn er im Uhrzeigersinn gezeichnet werden soll.

- -
-

Hinweis: Die Winkelzahlen werden in rad angegeben, nicht in deg. Die Umrechnungsformel lautet: rad = (Math.PI / 180) * deg.

-
-Dieses Beispiel zeigt Kreisbügen mit den unterschiedlichsten Parametern:
- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
-
-    for (var i = 0; i < 4; i++) {
-      for (var j = 0; j < 3; j++) {
-        ctx.beginPath();
-        var x = 25 + j * 50; // x coordinate
-        var y = 25 + i * 50; // y coordinate
-        var radius = 20; // Arc radius
-        var startAngle = 0; // Starting point on circle
-        var endAngle = Math.PI + (Math.PI * j) / 2; // End point on circle
-        var anticlockwise = i % 2 == 0 ? false : true; // clockwise or anticlockwise
-
-        ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
-
-        if (i > 1) {
-          ctx.fill();
-        } else {
-          ctx.stroke();
-        }
-      }
-    }
-  }
-}
-{{EmbedLiveSample("Kreisbögen", 160, 210, "https://mdn.mozillademos.org/files/204/Canvas_arc.png")}} - -

Bezier und quadratische Kurven

- -

Bézierkurven sind in kubischer und quadratischer Form enthalten. Damit kann man ziemlich komplexe Strukturen zeichnen.

- -
-
quadraticCurveTo(cp1x, cp1y, x, y)
-
Zeichnet eine quadratische Bézierkurve von der aktuellen Stiftposition zu x und y, mithilfe des Kontrollpunktes mit den Koordinaten (cp1x, cp1y).
-
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
-
Zeichnet eine quadratische Bézierkurve von der aktuellen Stiftposition zu x und y, mithilfe der Kontrollpunkte mit den Koordinaten (cp1x, cp1y) und (cp2x, cp2y).
-
- -

Den Unterschied zwischen den beiden Funktionen lässt sich am Besten durch die beiden Bilder rechts erklären: Oben die quadratische und unten die kubische.

- -

Die Kontrollpunkte sind hier rot, die Start- und Endpunkte blau gekennzeichnet.

- -

Quadratische Bézierkurven

- -

Dieses Beispiel zeichnet Mithilfe von Bézierkurven eine Sprechblase:

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
-
-    // Quadratric curves example
-    ctx.beginPath();
-    ctx.moveTo(75, 25);
-    ctx.quadraticCurveTo(25, 25, 25, 62.5);
-    ctx.quadraticCurveTo(25, 100, 50, 100);
-    ctx.quadraticCurveTo(50, 120, 30, 125);
-    ctx.quadraticCurveTo(60, 120, 65, 100);
-    ctx.quadraticCurveTo(125, 100, 125, 62.5);
-    ctx.quadraticCurveTo(125, 25, 75, 25);
-    ctx.stroke();
-  }
-}
- -

{{EmbedLiveSample("Quadratische_Bézierkurven", 160, 160, "https://mdn.mozillademos.org/files/243/Canvas_quadratic.png")}}

- -

Kubische Bézierkurven

- -

Dieses Beispiel zeichnet ein Herz Mithilfe von kubischen Bézierkurven.

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
-
-    // Cubic curves example
-    ctx.beginPath();
-    ctx.moveTo(75, 40);
-    ctx.bezierCurveTo(75, 37, 70, 25, 50, 25);
-    ctx.bezierCurveTo(20, 25, 20, 62.5, 20, 62.5);
-    ctx.bezierCurveTo(20, 80, 40, 102, 75, 120);
-    ctx.bezierCurveTo(110, 102, 130, 80, 130, 62.5);
-    ctx.bezierCurveTo(130, 62.5, 130, 25, 100, 25);
-    ctx.bezierCurveTo(85, 25, 75, 37, 75, 40);
-    ctx.fill();
-  }
-}
- -

{{EmbedLiveSample("Kubische_Bézierkurven", 160, 160, "https://mdn.mozillademos.org/files/207/Canvas_bezier.png")}}

- -

Rechtecke

- -

Es gibt auch eine Rechtecksmethode für Pfade:

- -
-
rect(x, y, width, height)
-
Zeichnet ein Rechteck.
-
- -

Nachdem diese Methode ausgeführt wurde, wird automatisch moveTo(0, 0) ausgeführt.

- -

Kombinationen

- -

Mit Kombinationen all dieser Pfadmethoden können die komplexesten Formen gezeichnet werden. In diesem letzten Beispiel wird ein Spielcharakter gezeichnet:

- - - -
function draw() {
-  var canvas = document.getElementById('canvas');
-  if (canvas.getContext) {
-    var ctx = canvas.getContext('2d');
-
-    roundedRect(ctx, 12, 12, 150, 150, 15);
-    roundedRect(ctx, 19, 19, 150, 150, 9);
-    roundedRect(ctx, 53, 53, 49, 33, 10);
-    roundedRect(ctx, 53, 119, 49, 16, 6);
-    roundedRect(ctx, 135, 53, 49, 33, 10);
-    roundedRect(ctx, 135, 119, 25, 49, 10);
-
-    ctx.beginPath();
-    ctx.arc(37, 37, 13, Math.PI / 7, -Math.PI / 7, false);
-    ctx.lineTo(31, 37);
-    ctx.fill();
-
-    for (var i = 0; i < 8; i++) {
-      ctx.fillRect(51 + i * 16, 35, 4, 4);
-    }
-
-    for (i = 0; i < 6; i++) {
-      ctx.fillRect(115, 51 + i * 16, 4, 4);
-    }
-
-    for (i = 0; i < 8; i++) {
-      ctx.fillRect(51 + i * 16, 99, 4, 4);
-    }
-
-    ctx.beginPath();
-    ctx.moveTo(83, 116);
-    ctx.lineTo(83, 102);
-    ctx.bezierCurveTo(83, 94, 89, 88, 97, 88);
-    ctx.bezierCurveTo(105, 88, 111, 94, 111, 102);
-    ctx.lineTo(111, 116);
-    ctx.lineTo(106.333, 111.333);
-    ctx.lineTo(101.666, 116);
-    ctx.lineTo(97, 111.333);
-    ctx.lineTo(92.333, 116);
-    ctx.lineTo(87.666, 111.333);
-    ctx.lineTo(83, 116);
-    ctx.fill();
-
-    ctx.fillStyle = 'white';
-    ctx.beginPath();
-    ctx.moveTo(91, 96);
-    ctx.bezierCurveTo(88, 96, 87, 99, 87, 101);
-    ctx.bezierCurveTo(87, 103, 88, 106, 91, 106);
-    ctx.bezierCurveTo(94, 106, 95, 103, 95, 101);
-    ctx.bezierCurveTo(95, 99, 94, 96, 91, 96);
-    ctx.moveTo(103, 96);
-    ctx.bezierCurveTo(100, 96, 99, 99, 99, 101);
-    ctx.bezierCurveTo(99, 103, 100, 106, 103, 106);
-    ctx.bezierCurveTo(106, 106, 107, 103, 107, 101);
-    ctx.bezierCurveTo(107, 99, 106, 96, 103, 96);
-    ctx.fill();
-
-    ctx.fillStyle = 'black';
-    ctx.beginPath();
-    ctx.arc(101, 102, 2, 0, Math.PI * 2, true);
-    ctx.fill();
-
-    ctx.beginPath();
-    ctx.arc(89, 102, 2, 0, Math.PI * 2, true);
-    ctx.fill();
-  }
-}
-
-// A utility function to draw a rectangle with rounded corners.
-
-function roundedRect(ctx, x, y, width, height, radius) {
-  ctx.beginPath();
-  ctx.moveTo(x, y + radius);
-  ctx.lineTo(x, y + height - radius);
-  ctx.arcTo(x, y + height, x + radius, y + height, radius);
-  ctx.lineTo(x + width - radius, y + height);
-  ctx.arcTo(x + width, y + height, x + width, y + height-radius, radius);
-  ctx.lineTo(x + width, y + radius);
-  ctx.arcTo(x + width, y, x + width - radius, y, radius);
-  ctx.lineTo(x + radius, y);
-  ctx.arcTo(x, y, x, y + radius, radius);
-  ctx.stroke();
-}
- -
-

Demo:

- -

{{EmbedLiveSample("Kombinationen", 160, 160)}}

- -

{{PreviousNext("Web/Guide/HTML/Canvas_tutorial/Basic_usage", "Web/Guide/HTML/Canvas_tutorial/Using_images")}}

-
-
diff --git a/files/de/web/guide/html/canvas_tutorial/grundlagen/index.html b/files/de/web/guide/html/canvas_tutorial/grundlagen/index.html deleted file mode 100644 index f89af7fa04..0000000000 --- a/files/de/web/guide/html/canvas_tutorial/grundlagen/index.html +++ /dev/null @@ -1,154 +0,0 @@ ---- -title: Grundlagen Canvas -slug: Web/Guide/HTML/Canvas_Tutorial/Grundlagen -tags: - - Canvas - - Graphics - - HTML - - Intermediate - - Tutorial -translation_of: Web/API/Canvas_API/Tutorial/Basic_usage ---- -
{{CanvasSidebar}} {{PreviousNext("Web/API/Canvas_API/Tutorial", "Web/API/Canvas_API/Tutorial/Drawing_shapes")}}
- -
-

Beginnen wir diese Einführung mit einem Blick auf das {{Glossary("HTML")}}-Element {{HTMLElement("canvas")}} an sich. Am Ende wirst du in einem Canvas einen 2D-Context anlegen können und ein erstes Beispiel im Browser gezeichnet haben.

-
- -

Das <canvas>-Element

- -

Beginnen wir mit dem {{HTMLElement("canvas")}}-Element:

- -
<canvas id="tutorial" width="150" height="150"></canvas>
-
- -

Auf den ersten Blick sieht ein {{HTMLElement("canvas")}} wie ein {{HTMLElement("img")}}-Element aus, mit dem Unterschied, dass es die Attribute src und alt nicht besitzt. Das <canvas>-Element hat nur zwei Attribute - {{htmlattrxref("width", "canvas")}} und {{htmlattrxref("height", "canvas")}}. Diese sind optional und können auch über {{Glossary("DOM")}}-Eigenschaften gesetzt werden. Wenn die Attribute nicht gesetzt sind, bekommt das Element eine Breite von 300px und eine Höhe von 150px. Die Maße des canvas können auch über {{Glossary("CSS")}} gesetzt werden, allerdings wird das Bild dann auf die gesetzte Größe skaliert. Wenn das Verhältnis der CSS-Maße nicht zur ursprünglichen Größe passt, wird das Bild verzerrt.

- -
-

Hinweis: Wenn das Ergebnis des Renderings verzerrt wirkt, dann setze bitte die Attribute width und height explizit im <canvas> und nicht über CSS.

-
- -

Das id-Attribut ist eines der globalen Attribute in HTML, welche auf alle HTML-Elemente anwendbar sind (sein sollen). Es empfiehlt sich eine id zu vergeben, dadurch wird der Zugriff mit JavaScript/CSS vereinfacht.

- -

Auch wenn man nicht mit CSS die Maße des canvas festlegen sollte, kann man jegliche andere CSS-Eigenschaften auf das {{HTMLElement("canvas")}}-Element anwenden (margin, border, background etc). Diese CSS-Regeln haben keinen Effekt auf das eigentliche Zeichnen (anders bei SVG)

- -
-

Fallback

- -

Einige ältere Browser unterstützen das {{HTMLElement("canvas")}}-Element nicht, deshalb sollte man einen sogenannten Fallback schreiben, welcher nur den Browsern angezeigt wird, welche das {{HTMLElement("canvas")}}-Element nicht unterstützen. Browser, die das {{HTMLElement("canvas")}}-Element unterstützen zeigen diesen Fallback nicht.

- -

Beispiele:

- -
<canvas id="stockGraph" width="150" height="150">
-  aktueller Wechselkurs: $3.15 +0.15
-</canvas>
-
-<canvas id="clock" width="150" height="150">
-  <img src="images/clock.png" width="150" height="150" alt=""/>
-</canvas>
-
- -

Benötigter </canvas>-Tag

- -

Im Unterschied zu dem {{HTMLElement("img")}}-Element, benötigt das {{HTMLElement("canvas")}}-Element den Endtag  (</canvas>).

- -

Wenn kein Fallback definiert wird, reicht ein <canvas id="foo" ...></canvas> völlig aus.

- -

Der Kontext

- -

{{HTMLElement("canvas")}} stellt mehrere Kontexte zum Zeichnen auf dem canvas zur Verfügung. Der Standardkontext ist der 2D-Kontext. Es gibt noch WebGL (3D context) basierend auf OpenGL ES.

- -

Zuerst ist das canvas leer. Mithilfe von JavaScript definiert man den Kontext und zeichnet mit diesem. Das {{HTMLElement("canvas")}}-Element hat eine Methode getContext(), mit der der Kontext definiert wird. getContext() benötigt nur einen String als Argument, den Typ des Kontextes. Für 2D-Grafiken ist dieser String "2d".

- -
var canvas = document.getElementById("tutorial");
-var ctx = canvas.getContext("2d");
-
- -

Die erste Zeile speichert in der Variablen canvas den DOM-Knoten unseres canvas mithilfe der {{domxref("document.getElementById()")}}-Methode. Danach wird die getContext()-Methode aufgerufen, um den Kontext in der Variablen ctx zu speichern.

- -
-

Browserkompatibilität prüfen

- -

Nicht nur der Fallback kann die Browserkompatibilität prüfen. Auch mit JavaScript ist dies möglich, in dem die Existenz der getContext()-Methode überprüft wird. Beispiel:

- -
var canvas = document.getElementById('tutorial');
-
-if (canvas.getContext) {
-  var ctx = canvas.getContext('2d');
-  // weiterer Code
-} else {
-  alert("Dein Browser unterstützt das <canvas> Element nicht")
-}
-
-
-
- -

HTML-Struktur

- -

Eine einfache HTML-Struktur reicht für unser Tutorial erst einmal völlig aus.

- -
-

Hinweis: Es gilt als schlechter Stil, Skripte direkt in HTML einzubetten. Wir tun das hier nur aus Gründen der Kompaktheit.

-
- -
<!DOCTYPE html>
-<html>
-  <head>
-    <title>Canvas tutorial</title>
-    <script type="text/javascript">
-      function draw() {
-        var canvas = document.getElementById('tutorial');
-        if (canvas.getContext) {
-          var ctx = canvas.getContext('2d');
-        }
-      }
-    </script>
-    <style type="text/css">
-      canvas { border: 1px solid black; }
-    </style>
-  </head>
-  <body onload="draw();">
-    <canvas id="tutorial" width="150" height="150"></canvas>
-  </body>
-</html>
-
- -

Das Skript enthält eine Funktion draw(), die nach dem Laden der Seite ausgeführt wird; dies geschieht durch Hören auf das {{event("load")}}-Ereignis des Dokuments. Diese oder eine ähnliche Funktion könnte auch durch {{domxref("WindowTimers.setTimeout", "window.setTimeout()")}}, {{domxref("WindowTimers.setInterval", "window.setInterval()")}} oder jeden anderen Ereignisbehandler aufgerufen werden, solange die Seite vorher geladen wurde.

- -

So sieht die Vorlage in Aktion aus. Wie man hier sehen kann, ist sie anfangs leer.

- -

{{EmbedLiveSample("HTML-Struktur", 160, 160)}}

- -

Einfaches Beispiel

- -

Im einfachen Beispiel werden zwei Rechtecke gezeichnet, eins mit Transparenz.

- -
<!DOCTYPE html>
-<html>
- <head>
-  <script type="application/javascript">
-    function draw() {
-      var canvas = document.getElementById("canvas");
-      if (canvas.getContext) {
-        var ctx = canvas.getContext("2d");
-
-        ctx.fillStyle = "rgb(200,0,0)";
-        ctx.fillRect(10, 10, 55, 50);
-
-        ctx.fillStyle = "rgba(0, 0, 200, 0.5)";
-        ctx.fillRect(30, 30, 55, 50);
-      }
-    }
-  </script>
- </head>
- <body onload="draw();">
-   <canvas id="canvas" width="150" height="150"></canvas>
- </body>
-</html>
-
- -

Demo:

- -

{{EmbedLiveSample("Einfaches_Beispiel", 160, 160, "https://mdn.mozillademos.org/files/228/canvas_ex1.png")}}

- -

{{PreviousNext("Web/Guide/HTML/Canvas_tutorial", "Web/Guide/HTML/Canvas_tutorial/Drawing_shapes")}}

diff --git a/files/de/web/guide/html/canvas_tutorial/index.html b/files/de/web/guide/html/canvas_tutorial/index.html deleted file mode 100644 index 487f5b7984..0000000000 --- a/files/de/web/guide/html/canvas_tutorial/index.html +++ /dev/null @@ -1,51 +0,0 @@ ---- -title: Canvas Tutorial -slug: Web/Guide/HTML/Canvas_Tutorial -translation_of: Web/API/Canvas_API/Tutorial ---- -

- -

<canvas> ("Leinwand") ist ein HTML Element, auf das man mit Hilfe von Skripten (normalerweise JavaScript) Animationen, Grafiken oder Bilder projiziert. Die Bilder rechts zeigen Beispiele, die sich mit dem <canvas>-Element erstellen lassen.

- -

Das <canvas>-Element wurde zuerst von Apple für das Mac OS X Dashboard vorgestellt und später in Safari und Google Chrome implementiert. Gecko 1.8-basierte Browser wie Firefox 1.5 und jünger unterstützen dieses Element ebenfalls. Das <canvas>-Element ist Teil der WhatWG Web applications 1.0 Spezifikation (HTML5).

- -

Dieses Tutorial beschreibt die Grundlagen des Zeichnens von 2d-Grafiken mit dem <canvas>-Element. Die Beispiele sollen die Möglichkeiten des Canvas aufzeigen. Der zugehörige Code dient als Einführung und kann als Vorlage für eigenen Content dienen.

- -

Vorbereitung

- -

Das <canvas>-Element ("Leinwand") sinnvoll zu nutzen ist nicht schwierig, setzt aber ein einfaches Verständnis von HTML und JavaScript voraus. Einige ältere Browser unterstützen das <canvas>-Element nicht. Die Standardgröße des Canvas beträgt 300 x 150 Pixel (Breite x Höhe). Selbstverständlich lassen diese sich über die Attribute height und width oder mit Hilfe von CSS ändern. Um auf dem <canvas>-Element zu zeichnen, nutzen Entwickler meist die JavaScript-Canvas-API "on the fly".

- -

In diesem Tutorial

- - - -

Siehe auch

- - - -
{{ Next("Web/Guide/HTML/Canvas_tutorial/Basic_usage") }}
diff --git a/files/de/web/guide/html/content_categories/index.html b/files/de/web/guide/html/content_categories/index.html new file mode 100644 index 0000000000..03687c47af --- /dev/null +++ b/files/de/web/guide/html/content_categories/index.html @@ -0,0 +1,153 @@ +--- +title: Inhaltskategorien +slug: Web/Guide/HTML/Inhaltskategorien +tags: + - Anleitung + - HTML + - HTML5 + - NeedsTranslation + - Web + - erweitert +translation_of: Web/Guide/HTML/Content_categories +--- +

Für jedes HTML-Element gibt es Regeln, welche definieren, welchen Inhalt es hat. Diese Regeln sind zu Inhaltsmodellen gruppiert, welche für mehrere Elemente gelten. Jedes HTML-Element gehört zu null oder einem oder mehreren Inhaltsmodellen, von welchen jedes die Regeln bestimmt, welche der Inhalt des Elementes in einem gültigen HTML-Document befolgen muss.

+ +

Es gibt drei Typen von Inhaltskategorien:

+ + + +
Content_categories_venn.png
+ +

Hauptinhaltskategorien

+ +

Metadateninhalt

+ +

Elemente, welche zu der Metadatainhaltscategorie(engl.metadata content category) gehören, verändern die Präsentation oder das Verhalten des Restes des Documentes, stellen Links zu anderen Documenten ein, oder enthalten andere out-of-band-Information.

+ +

Elemente, die zu dieser Kategorie gehören, sind {{HTMLElement("base")}}, {{HTMLElement("command")}}, {{HTMLElement("link")}}, {{HTMLElement("meta")}}, {{HTMLElement("noscript")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} und {{HTMLElement("title")}}.

+ +

Fließender Inhalt

+ +

Elemente, die zu der Kategorie des fließenden Inhaltes(engl.flow content category gehören, enthalten typischerweise Text oder eingebetteten Inhalt. Sie sind: {{HTMLElement("a")}}, {{HTMLElement("abbr")}}, {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}},{{HTMLElement("bdo")}}, {{HTMLElement("bdi")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{HTMLElement("command")}}, {{HTMLElement("data")}}, {{HTMLElement("datalist")}}, {{HTMLElement("del")}}, {{HTMLElement("details")}}, {{HTMLElement("dfn")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("hr")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("ins")}}, {{HTMLElement("kbd")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("main")}}, {{HTMLElement("map")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("menu")}}, {{HTMLElement("meter")}}, {{HTMLElement("nav")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("ol")}}, {{HTMLElement("output")}}, {{HTMLElement("p")}}, {{HTMLElement("pre")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("s")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("section")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("table")}}, {{HTMLElement("template")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("ul")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} und Text.

+ +

Einige wenige Elemente gehören zu dieser Kategorie, aber nur, wenn eine specifische Bedingung erfüllt ist:

+ + + +

Unterteilender Inhalt

+ +

Elemente, die zu dem sectioninig-content-Modell gehören, erstellen eine Section in der laufenden Outline, welche das Aussehen eines {{HTMLElement("header")}}-Elementes , {{HTMLElement("footer")}}-Elementes, und Überschrifteninhaltes definiert.

+ +

Elemente, die zu dieser Categorie gehören, sind {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("nav")}} und {{HTMLElement("section")}}. 

+ +
+

Notiz: Nicht dieses Modell mit der Sectionierende-Wurzel-Kategorie(engl.sectioning root category, welche ihren Inhalt von der regularen Outline isoliert, verwechseln.

+
+ +

Überschrifteninhalt

+ +

Überschrifteninhalt definiert den Titel einer Section, dabei gibt es keinen Unterschied, ob es mit einem expliciten sectionierenden Inhalt gekennzeichnet oder implicite durch den Überschrifteninhalt selbst definiert ist.

+ +

Elemente, die zu dieser Categorie gehören, sind {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} und {{HTMLElement("hgroup")}}.

+ +
+

Notiz: Obwohl es meistens Überschrifteninhalt enthält, ist {{HTMLElement("header")}} selbst kein Überschrifteninhalt.

+
+ +

Gestaltender Inhalt

+ +

Gestaltender Inhalt definiert den Text und das Markup, welche er enthält. Folgen von phrasierendem Inhalt sind Paragraphen.

+ +

Elemente, die zu dieser Categorie gehören, sind {{HTMLElement("abbr")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{HTMLElement("command")}}, {{HTMLElement("datalist")}}, {{HTMLElement("dfn")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("kbd")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("meter")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} und einfacher Text (welcher nicht nur aus Leerzeichen-Zeichen besteht).

+ +

Einige andere Elemente, die zu dieser Categorie gehören, aber nur, falls eine bestimmte Condition erfüllt ist:

+ + + +

Eingebetter Inhalt

+ +

Eingebetteter Inhalt importiert eine andere Ressource oder gibt Inhalt einer anderen Markup-Sprache oder Namensraumes in das Document ein. Elemente in dieser Categorie sind: {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{MathMLElement("math")}}, {{HTMLElement("object")}}, {{SVGElement("svg")}}, {{HTMLElement("video")}}.

+ +

Interaktiver Inhalt

+ +

Interaktiver Inhalt enthält Elemente, die speziell für Interaktionen mit dem Benutzer gedacht sind. Folgende Elemente geöhren zu dieser Kategorie: {{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.
+ Einige Elemente sind nur unter spezifischen Conditionen in dieser Categorie:

+ + + +

Fühlbarer Inhalt

+ +

 A content is palpable when it's neither empty nor hidden. Elements whose model is flow content or phrasing content should have at least one node which is palpable.

+ +

Formularbezogener Inhalt

+ +

Formularassoziierter Inhalt umfasst Elemente mit einem Formularbezeichner, welcher durch ein Formularattribut verfügbar gemacht wird. Ein Formularbezeichner ist entweder das enthaltende {{HTMLElement ("form")}} Element oder das Element, dessen ID im Formularattribut angegeben ist.

+ + + +

This category contains several sub-categories:

+ +
+
gelistet
+
Elements that are listed in the form.elements and fieldset.elements IDL collections. Contains {{HTMLElement("button")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.
+
bezeichenbar
+
Elements that can be associated with {{HTMLElement("label")}} elements. Contains {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("meter")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.
+
abschickbar
+
Elements that can be used for constructing the form data set when the form is submitted. Contains {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.
+
zurücksetzbar
+
Elements that can be affected when a form is reset. Contains {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("output")}},{{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.
+
+ +

Transparentes Inhaltsmodell

+ +

If an element has a transparent content model, then its contents must be structured such that they would be valid HTML 5, even if the transparent element were removed and replaced by the child elements.

+ +

For example, the {{HTMLElement("del")}} and {{HTMLELement("ins")}} elements are transparent:

+ +
<p>We hold these truths to be <del><em>sacred &amp; undeniable</em></del> <ins>self-evident</ins>.</p>
+
+ +

If those elements were removed, this fragment would still be valid HTML (if not correct English).

+ +
<p>We hold these truths to be <em>sacred &amp; undeniable</em> self-evident.</p>
+
+ +

Andere Inhaltsmodelle

+ +

Sectioning root.

diff --git a/files/de/web/guide/html/content_editable/index.html b/files/de/web/guide/html/content_editable/index.html deleted file mode 100644 index 03ab2fdfe0..0000000000 --- a/files/de/web/guide/html/content_editable/index.html +++ /dev/null @@ -1,52 +0,0 @@ ---- -title: Content Editable -slug: Web/Guide/HTML/Content_Editable -tags: - - HTML5 Inhalt ändern editierbar -translation_of: Web/Guide/HTML/Editable_content ---- -

In HTML5 kann jedes Element editiert werden. Mit JavaScript Event handlers können Sie Ihre Webseite in einen umfangreichen und schnellen Texteditor verwandeln. Dieser Artikel gibt einige Informationen über diese Funktion.

- -

Kompatibilität

- -

Content editable ist kompatibel mit folgenden Browsern.

- - - -

Keine Unterstützung in Opera Mini.

- -

Wie funktioniert es?

- -

Ändere das {{DOMXRef("HTMLElement.contentEditable", "contentEditable")}} Attribut zu true in deinem HTML Element. Es kann in nahezu allen HTML Elementen genutzt werden.

- -

Beispiele

- -

Ein einfaches Beispiel:

- -
<div contenteditable="true">
-  This text can be edited by the user.
-</div>
- -

Das obige Beispiel kann direkt ausprobiert werden:

- -

{{ EmbedLiveSample('Beispiele') }}

- -

Weiterführende Informationen

- -
user_pref("capability.policy.policynames", "allowclipboard");
-user_pref("capability.policy.allowclipboard.sites", "https://www.mozilla.org");
-user_pref("capability.policy.allowclipboard.Clipboard.cutcopy", "allAccess");
-user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess");
- -

How to interact with the content  (old IE style API) and here

diff --git a/files/de/web/guide/html/editable_content/index.html b/files/de/web/guide/html/editable_content/index.html new file mode 100644 index 0000000000..03ab2fdfe0 --- /dev/null +++ b/files/de/web/guide/html/editable_content/index.html @@ -0,0 +1,52 @@ +--- +title: Content Editable +slug: Web/Guide/HTML/Content_Editable +tags: + - HTML5 Inhalt ändern editierbar +translation_of: Web/Guide/HTML/Editable_content +--- +

In HTML5 kann jedes Element editiert werden. Mit JavaScript Event handlers können Sie Ihre Webseite in einen umfangreichen und schnellen Texteditor verwandeln. Dieser Artikel gibt einige Informationen über diese Funktion.

+ +

Kompatibilität

+ +

Content editable ist kompatibel mit folgenden Browsern.

+ + + +

Keine Unterstützung in Opera Mini.

+ +

Wie funktioniert es?

+ +

Ändere das {{DOMXRef("HTMLElement.contentEditable", "contentEditable")}} Attribut zu true in deinem HTML Element. Es kann in nahezu allen HTML Elementen genutzt werden.

+ +

Beispiele

+ +

Ein einfaches Beispiel:

+ +
<div contenteditable="true">
+  This text can be edited by the user.
+</div>
+ +

Das obige Beispiel kann direkt ausprobiert werden:

+ +

{{ EmbedLiveSample('Beispiele') }}

+ +

Weiterführende Informationen

+ +
user_pref("capability.policy.policynames", "allowclipboard");
+user_pref("capability.policy.allowclipboard.sites", "https://www.mozilla.org");
+user_pref("capability.policy.allowclipboard.Clipboard.cutcopy", "allAccess");
+user_pref("capability.policy.allowclipboard.Clipboard.paste", "allAccess");
+ +

How to interact with the content  (old IE style API) and here

diff --git a/files/de/web/guide/html/html5/index.html b/files/de/web/guide/html/html5/index.html new file mode 100644 index 0000000000..a6f25869e9 --- /dev/null +++ b/files/de/web/guide/html/html5/index.html @@ -0,0 +1,174 @@ +--- +title: HTML5 +slug: Web/HTML/HTML5 +tags: + - HTML + - HTML5 + - References + - Web Development +translation_of: Web/Guide/HTML/HTML5 +--- +

HTML5 ist die aktuellste Entwicklung des Web Standards, der HTML definiert. Der Begriff repräsentiert zwei verschiedene Konzepte:

+ + + +

Diese Referenzseite wurde entworfen, um für alle offenen Web-Entwickler nutzbar zu sein und verknüpft zahlreiche Ressourcen über HTML5 Technologien, gruppiert in mehreren Kategorien, basierend auf ihrer Funktion.

+ + + +
+
+

SemantiK

+ +
+
Gliederungen und Abschnitte in HTML5
+
Ein Blick auf die neuen Gliederungs- und Abschnitts-Elemente in HTML5: {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("nav")}}, {{HTMLElement("header")}}, {{HTMLElement("footer")}}, {{HTMLElement("aside")}} und {{HTMLElement("hgroup")}}.
+
HTML5 Audio und Video benutzen
+
Das {{HTMLElement("audio")}} und das {{HTMLElement("video")}} Element binden neue Multimedia-Inhalte ein und erlauben, sie zu manipulieren.
+
Formulare in HTML5
+
Ein Blick auf Verbesserungen bei Formularen in HTML5: die constraint validation API (Überprüfung von Wertbeschränkungen), mehrere neue Attribute, neue Werte für das {{HTMLElement("input")}} Attribut {{htmlattrxref("type", "input")}} und das neue {{HTMLElement("output")}} Element.
+
Neue semantische Elemente
+
Außer Sektions-, Medien- und Formular-Elementen erhöhen eine Vielzahl neuer Elemente, wie {{HTMLElement("mark")}}, {{HTMLElement("figure")}}, {{HTMLElement("figcaption")}}, {{HTMLElement("data")}}, {{HTMLElement("time")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}} oder {{HTMLElement("meter")}}, die Menge gültiger HTML5 Elemente.
+
Verbesserung bei {{HTMLElement("iframe")}}
+
Mithilfe der {{htmlattrxref("sandbox", "iframe")}}, {{htmlattrxref("seamless", "iframe")}} und {{htmlattrxref("srcdoc", "iframe")}} Attribute können Autoren jetzt das Sicherheitslevel und das gewünschte Rendering von {{HTMLElement("iframe")}} Elementen angeben.
+
MathML
+
Erlaubt das direkte Einbinden mathematischer Formeln.
+
Einführung in HTML5
+
Dieser Artikel führt in die Benutzung von HTML5 für Ihr Web-Design oder Ihre Web-Anwendung ein.
+
HTML5-konformer Parser
+
Der Parser, der aus den Bytes eines HTML-Dokumentes ein DOM erzeugt, wurde erweitert und definiert jetzt präzise das Verhalten in allen Fällen, selbst für ungültiges HTML. Das führt zu viel größerer Vorhersehbarkeit und Zusammenarbeit zwischen HTML5-konformen Browsern.
+
+ +

Konnektivität

+ +
+
Web Sockets
+
Erlaubt eine permanente Verbindung zwischen der Seite und dem Server zu erzeugen und nicht-HTML-Daten hierüber auszutauschen.
+
Server-gesendete Ereignisse
+
Erlaubt dem Server, Ereignisse direkt an den Client zu senden, anstatt wie beim klassischen Modell Daten nur als Antwort auf eine Anfrage des Clients senden zu können.
+
WebRTC
+
Diese Technologie, wobei RTC für Real-Time Communication (Echtzeit-Kommunikation) steht, erlaubt sich mit anderen zu verbinden und Videokonferenzen direkt aus dem Browser zu steuern, ohne dafür ein Plugin oder externes Programm zu brauchen.
+
+ +

Offline & Speicherung

+ +
+
+
Offline-Ressourcen: der Anwendungs-Cache
+
Firefox unterstützt vollständig die HTML5 offline resource Spezifikation. Die meisten anderen bieten variierende Unterstützung für Offline-Ressourcen.
+
Online- und Offline-Ereignisse
+
Firefox 3 unterstützt die WHATWG Online- und Offline-Ereignisse, die Anwendungen und Erweiterungen erkennen lassen, ob oder ob es keine aktive Internetverbindung gibt, sowie ob eine Verbindung auf- oder abgebaut wird.
+
WHATWG Client-seitiger Sitzungs- und persistenter Speicher (auch bekannt als DOM Storage)
+
Client-seitiger Sitzungs- und persistenter Speicher erlaubt Webanwendungen, strukturierte Daten auf der Anwenderseite zu speichern.
+
IndexedDB
+
Ist ein Web-Standard zum Speichern von großen Mengen strukturierter Daten im Browser und für das hochperformante Suchen dieser Daten mittels Indizes.
+
Dateien aus Webanwendungen benutzen
+
Unterstützung für die neue HTML5 Datei-API wurde zu Gecko hinzugefügt, wodurch Web-Anwendungen der Zugriff auf vom Benutzer gewählte lokale Dateien ermöglicht wird. Das schließt die Unterstützung für das Auswählen mehrerer Dateien über das neue multiple Attribut von {{HTMLElement("input")}} Elementen des Typs file ein. Außerdem gibt es FileReader.
+
+
+ +

Multimedia

+ +
+
HTML5 Audio und Video benutzen
+
Das {{HTMLElement("audio")}} und das {{HTMLElement("video")}} Element binden neue Multimedia-Inhalte ein und erlauben, sie zu manipulieren.
+
WebRTC
+
Diese Technologie, wobei RTC für Real-Time Communication (Echtzeit-Kommunikation) steht, erlaubt sich mit anderen zu verbinden und Videokonferenzen direkt aus dem Browser zu steuern, ohne dafür ein Plugin oder externes Programm zu brauchen.
+
Die Camera API benutzen
+
Erlaubt das Benutzen, Manipulieren und Speichern von Bildern der Computer-Kamera.
+
Untertitel und WebVTT
+
Das {{HTMLElement("track")}} Element erlaubt Untertitel und Kapitel. WebVTT ist ein Texttitel-Format.
+
+ +

3D, graphiKEN & effeKtE

+ +
+
Canvas-Tutorial
+
Lerne mehr über das neue {{HTMLElement("canvas")}} Element und wie darauf Diagramme und andere Objekte in Firefox gezeichnet werden können.
+
HTML5 Text-API für <canvas> Elemente
+
Die HTML5 Text-API wird jetzt von {{HTMLElement("canvas")}} Elementen unterstützt.
+
WebGL
+
WebGL bringt 3D-Graphiken durch die Einführung einer auf OpenGL ES 2.0 basierten API in's Web, die in HTML5 {{HTMLElement("canvas")}} Elementen genutzt werden kann.
+
SVG
+
Ein XML-basiertes Format von Vektor-Bildern, die direkt in HTML eingebettet werden können.
+
 
+
+
+ +
+

Leistung & integration

+ +
+
Web Worker
+
Erlaubt die Ausführung von JavaScript an Hintergrund-Threads zu delegieren, so dass diese Aktivitäten interaktive Ereignisse nicht verlangsamen.
+
XMLHttpRequest Level 2
+
Erlaubt einige Teile der Seite asynchron zu laden, so dass dynamische Inhalte je nach Zeit und Verhalten des Benutzers gezeigt werden können. Das ist die Technologie hinter Ajax.
+
JIT-kompilierende JavaScript-Engines
+
Die neue Generation der JavaScript-Engines sind wesentlich performanter, was zu deutlich höherer Leistung führt.
+
History API
+
Erlaubt die Manipulation der Browser-Historie. Das ist besonders hilfreich für Seiten, die interaktiv neue Informationen laden.
+
Das contentEditable Attribut: verwandeln Sie Ihre Webseite in ein Wiki!
+
In HTML5 wurde das contentEditable Attribut standardiziert. Lernen Sie mehr über dieses Feature.
+
Drag und Drop
+
Die HTML5 Drag und Drop API erlaubt Unterstützung für das Ziehen und Fallenlassen von Objekte innerhalb und zwischen Webseiten. Außerdem gibt es eine einfachere API für die Benutzung in Erweiterungen und Mozilla-basierten Anwendungen.
+
Fokus-Kontrolle in HTML
+
Die neuen HTML5 activeElement und hasFocus Attribute werden unterstützt.
+
Web-basierte Protokoll-Handler
+
Sie können jetzt Webanwendungen als Protokoll-Handler mit der navigator.registerProtocolHandler() Methode registrieren.
+
requestAnimationFrame
+
Erlaubt das Rendern von Animationen für optimale Leistung zu kontrollieren.
+
Vollbild-API
+
Kontrolliert die Benutzung des ganzen Bildschirms für eine Webseite oder -anwendung, ohne die Browserelemente anzuzeigen.
+
Pointer Lock API
+
Erlaubt, den Zeiger auf den Bereich des Inhalts zu begrenzen, so dass Spiele und ähnliche Anwendungen nicht den Fokus verlieren, wenn der Zeiger die Fenstergrenzen erreicht.
+
Online- und Offline-Ereignisse
+
Um eine gute offline-fähige Webanwendung zu entwickeln, müssen Sie wissen, wann Ihre Anwendung tatsächlich offline ist. Nebenbei sollten Sie auch wissen, wann Ihre Anwendung wieder online ist.
+
+ +

Gerätezugriff

+ +
+
Die Kamera-API benutzen
+
Erlaubt das Benutzen, Manipulieren und Speichern von Bildern der Computer-Kamera.
+
Touch-Ereignisse
+
Verarbeitung von Ereignissen, die durch Tippen auf Touchscreens ausgelöst werden.
+
Geolocation benutzen
+
Lässt Browser die Position des Benutzers mittels geolocation herausfinden.
+
Geräte-Orientierung ermitteln
+
Ermöglicht herauszufinden, wenn das Gerät des Browsers die Orientierung wechselt. Das kann als Eingabegerät genutzt werden (z.B. um Spiele zu entwickeln, die auf die Orientierung des Gerätes reagieren) oder um das Layout einer Seite der Orientierung des Bildschirms anzupassen (hochkant oder Querformat).
+
Pointer Lock API
+
Erlaubt, den Zeiger auf den Bereich des Inhalts zu begrenzen, so dass Spiele und ähnliche Anwendungen nicht den Fokus verlieren, wenn der Zeiger die Fenstergrenzen erreicht.
+
+ +

Styling

+ +

CSS wurde erweitert, um das Dekorieren von Elementen auf viel komplexere Weisen zu ermöglichen. Das wird oft als CSS3 bezeichnet, obwohl CSS keine monolithische Spezifikation mehr ist und die unterschiedlichen Module nicht alle auf Level 3 sind: einige sind auf Level 1 und andere auf Level 4, und alle dazwischen liegenden Level sind vertreten.

+ +
+
Neue Funktionen für Hintergründe
+
Es ist jetzt möglich, Boxen über {{cssxref("box-shadow")}} einen Schatten zu geben und mehrere Hintergründe zu setzen.
+
Ausgefallenere Ränder
+
Jetzt ist es nicht nur möglich, Ränder mit Bildern über {{cssxref("border-image")}} und zugehörige ausgeschriebene Eigenschaften zu dekorieren, sondern auch runde Ränder werden über die {{cssxref("border-radius")}} Eigenschaft unterstützt.
+
Stile animierbar machen
+
Mit CSS Übergängen, um zwischen unterschiedlichen Zuständen zu animieren, oder CSS Animationen, um Teile der Seite ohne auslösendes Ereignis zu animieren, können Sie jetzt mobile Elemente Ihrer Seite kontrollieren.
+
Typographie-Verbesserungen
+
Autoren haben mehr Kontrolle, um eine bessere Typographie zu erreichen. Sie können Textüberlauf mit {{cssxref("text-overflow")}} und Silbentrennung kontrollieren, aber sie können auch Schatten zuweisen und noch präziser seine Dekorationen kontrollieren. Benutzerdefinierte Schriftarten können durch die neue {{cssxref("@font-face")}} at-Regel heruntergeladen und angewendet werden.
+
Neue Präsentations-Layouts
+
Um die Flexibilität von Designs zu verbessern, wurden zwei neue Layouts hinzugefügt: das CSS Mehr-Spalten-Layout und das CSS Flexible-Box-Layout.
+
+
+
+ +

 

diff --git a/files/de/web/guide/html/inhaltskategorien/index.html b/files/de/web/guide/html/inhaltskategorien/index.html deleted file mode 100644 index 03687c47af..0000000000 --- a/files/de/web/guide/html/inhaltskategorien/index.html +++ /dev/null @@ -1,153 +0,0 @@ ---- -title: Inhaltskategorien -slug: Web/Guide/HTML/Inhaltskategorien -tags: - - Anleitung - - HTML - - HTML5 - - NeedsTranslation - - Web - - erweitert -translation_of: Web/Guide/HTML/Content_categories ---- -

Für jedes HTML-Element gibt es Regeln, welche definieren, welchen Inhalt es hat. Diese Regeln sind zu Inhaltsmodellen gruppiert, welche für mehrere Elemente gelten. Jedes HTML-Element gehört zu null oder einem oder mehreren Inhaltsmodellen, von welchen jedes die Regeln bestimmt, welche der Inhalt des Elementes in einem gültigen HTML-Document befolgen muss.

- -

Es gibt drei Typen von Inhaltskategorien:

- - - -
Content_categories_venn.png
- -

Hauptinhaltskategorien

- -

Metadateninhalt

- -

Elemente, welche zu der Metadatainhaltscategorie(engl.metadata content category) gehören, verändern die Präsentation oder das Verhalten des Restes des Documentes, stellen Links zu anderen Documenten ein, oder enthalten andere out-of-band-Information.

- -

Elemente, die zu dieser Kategorie gehören, sind {{HTMLElement("base")}}, {{HTMLElement("command")}}, {{HTMLElement("link")}}, {{HTMLElement("meta")}}, {{HTMLElement("noscript")}}, {{HTMLElement("script")}}, {{HTMLElement("style")}} und {{HTMLElement("title")}}.

- -

Fließender Inhalt

- -

Elemente, die zu der Kategorie des fließenden Inhaltes(engl.flow content category gehören, enthalten typischerweise Text oder eingebetteten Inhalt. Sie sind: {{HTMLElement("a")}}, {{HTMLElement("abbr")}}, {{HTMLElement("address")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}},{{HTMLElement("bdo")}}, {{HTMLElement("bdi")}}, {{HTMLElement("blockquote")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{HTMLElement("command")}}, {{HTMLElement("data")}}, {{HTMLElement("datalist")}}, {{HTMLElement("del")}}, {{HTMLElement("details")}}, {{HTMLElement("dfn")}}, {{HTMLElement("div")}}, {{HTMLElement("dl")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("figure")}}, {{HTMLElement("footer")}}, {{HTMLElement("form")}}, {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}, {{HTMLElement("header")}}, {{HTMLElement("hgroup")}}, {{HTMLElement("hr")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("ins")}}, {{HTMLElement("kbd")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("main")}}, {{HTMLElement("map")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("menu")}}, {{HTMLElement("meter")}}, {{HTMLElement("nav")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("ol")}}, {{HTMLElement("output")}}, {{HTMLElement("p")}}, {{HTMLElement("pre")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("s")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("section")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("table")}}, {{HTMLElement("template")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("ul")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} und Text.

- -

Einige wenige Elemente gehören zu dieser Kategorie, aber nur, wenn eine specifische Bedingung erfüllt ist:

- - - -

Unterteilender Inhalt

- -

Elemente, die zu dem sectioninig-content-Modell gehören, erstellen eine Section in der laufenden Outline, welche das Aussehen eines {{HTMLElement("header")}}-Elementes , {{HTMLElement("footer")}}-Elementes, und Überschrifteninhaltes definiert.

- -

Elemente, die zu dieser Categorie gehören, sind {{HTMLElement("article")}}, {{HTMLElement("aside")}}, {{HTMLElement("nav")}} und {{HTMLElement("section")}}. 

- -
-

Notiz: Nicht dieses Modell mit der Sectionierende-Wurzel-Kategorie(engl.sectioning root category, welche ihren Inhalt von der regularen Outline isoliert, verwechseln.

-
- -

Überschrifteninhalt

- -

Überschrifteninhalt definiert den Titel einer Section, dabei gibt es keinen Unterschied, ob es mit einem expliciten sectionierenden Inhalt gekennzeichnet oder implicite durch den Überschrifteninhalt selbst definiert ist.

- -

Elemente, die zu dieser Categorie gehören, sind {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}} und {{HTMLElement("hgroup")}}.

- -
-

Notiz: Obwohl es meistens Überschrifteninhalt enthält, ist {{HTMLElement("header")}} selbst kein Überschrifteninhalt.

-
- -

Gestaltender Inhalt

- -

Gestaltender Inhalt definiert den Text und das Markup, welche er enthält. Folgen von phrasierendem Inhalt sind Paragraphen.

- -

Elemente, die zu dieser Categorie gehören, sind {{HTMLElement("abbr")}}, {{HTMLElement("audio")}}, {{HTMLElement("b")}}, {{HTMLElement("bdo")}}, {{HTMLElement("br")}}, {{HTMLElement("button")}}, {{HTMLElement("canvas")}}, {{HTMLElement("cite")}}, {{HTMLElement("code")}}, {{HTMLElement("command")}}, {{HTMLElement("datalist")}}, {{HTMLElement("dfn")}}, {{HTMLElement("em")}}, {{HTMLElement("embed")}}, {{HTMLElement("i")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{HTMLElement("input")}}, {{HTMLElement("kbd")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("mark")}}, {{MathMLElement("math")}}, {{HTMLElement("meter")}}, {{HTMLElement("noscript")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("q")}}, {{HTMLElement("ruby")}}, {{HTMLElement("samp")}}, {{HTMLElement("script")}}, {{HTMLElement("select")}}, {{HTMLElement("small")}}, {{HTMLElement("span")}}, {{HTMLElement("strong")}}, {{HTMLElement("sub")}}, {{HTMLElement("sup")}}, {{SVGElement("svg")}}, {{HTMLElement("textarea")}}, {{HTMLElement("time")}}, {{HTMLElement("var")}}, {{HTMLElement("video")}}, {{HTMLElement("wbr")}} und einfacher Text (welcher nicht nur aus Leerzeichen-Zeichen besteht).

- -

Einige andere Elemente, die zu dieser Categorie gehören, aber nur, falls eine bestimmte Condition erfüllt ist:

- - - -

Eingebetter Inhalt

- -

Eingebetteter Inhalt importiert eine andere Ressource oder gibt Inhalt einer anderen Markup-Sprache oder Namensraumes in das Document ein. Elemente in dieser Categorie sind: {{HTMLElement("audio")}}, {{HTMLElement("canvas")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("img")}}, {{MathMLElement("math")}}, {{HTMLElement("object")}}, {{SVGElement("svg")}}, {{HTMLElement("video")}}.

- -

Interaktiver Inhalt

- -

Interaktiver Inhalt enthält Elemente, die speziell für Interaktionen mit dem Benutzer gedacht sind. Folgende Elemente geöhren zu dieser Kategorie: {{HTMLElement("a")}}, {{HTMLElement("button")}}, {{HTMLElement("details")}}, {{HTMLElement("embed")}}, {{HTMLElement("iframe")}}, {{HTMLElement("keygen")}}, {{HTMLElement("label")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.
- Einige Elemente sind nur unter spezifischen Conditionen in dieser Categorie:

- - - -

Fühlbarer Inhalt

- -

 A content is palpable when it's neither empty nor hidden. Elements whose model is flow content or phrasing content should have at least one node which is palpable.

- -

Formularbezogener Inhalt

- -

Formularassoziierter Inhalt umfasst Elemente mit einem Formularbezeichner, welcher durch ein Formularattribut verfügbar gemacht wird. Ein Formularbezeichner ist entweder das enthaltende {{HTMLElement ("form")}} Element oder das Element, dessen ID im Formularattribut angegeben ist.

- - - -

This category contains several sub-categories:

- -
-
gelistet
-
Elements that are listed in the form.elements and fieldset.elements IDL collections. Contains {{HTMLElement("button")}}, {{HTMLElement("fieldset")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("output")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.
-
bezeichenbar
-
Elements that can be associated with {{HTMLElement("label")}} elements. Contains {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("meter")}}, {{HTMLElement("output")}}, {{HTMLElement("progress")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.
-
abschickbar
-
Elements that can be used for constructing the form data set when the form is submitted. Contains {{HTMLElement("button")}}, {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("object")}}, {{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.
-
zurücksetzbar
-
Elements that can be affected when a form is reset. Contains {{HTMLElement("input")}}, {{HTMLElement("keygen")}}, {{HTMLElement("output")}},{{HTMLElement("select")}}, and {{HTMLElement("textarea")}}.
-
- -

Transparentes Inhaltsmodell

- -

If an element has a transparent content model, then its contents must be structured such that they would be valid HTML 5, even if the transparent element were removed and replaced by the child elements.

- -

For example, the {{HTMLElement("del")}} and {{HTMLELement("ins")}} elements are transparent:

- -
<p>We hold these truths to be <del><em>sacred &amp; undeniable</em></del> <ins>self-evident</ins>.</p>
-
- -

If those elements were removed, this fragment would still be valid HTML (if not correct English).

- -
<p>We hold these truths to be <em>sacred &amp; undeniable</em> self-evident.</p>
-
- -

Andere Inhaltsmodelle

- -

Sectioning root.

diff --git a/files/de/web/guide/html/sections_and_outlines_of_an_html5_document/index.html b/files/de/web/guide/html/sections_and_outlines_of_an_html5_document/index.html deleted file mode 100644 index 882a3333dc..0000000000 --- a/files/de/web/guide/html/sections_and_outlines_of_an_html5_document/index.html +++ /dev/null @@ -1,351 +0,0 @@ ---- -title: Verwendung von HTML-Abschnitten und -Gliederungen -slug: Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document -translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines ---- -
{{HTMLSidebar}}
- -
-

Wichtig: Es gibt keine Implementierungen des vorgeschlagenen Gliederungsalgorithmus in Webbrowsern oder Unterstützungstechnologie. Es war nie Teil einer endgültigen W3C-Spezifikation. Daher sollte der Gliederungsalgorithmus nicht verwendet werden, um den Benutzern die Dokumentstruktur zu vermitteln. Autoren sollten den Überschriftenrang (h1-h6) verwenden, um die Dokumentstruktur zu vermitteln.

-
- -

Die HTML5-Spezifikation bietet Webentwicklern mehrere neue Elemente, mit denen sie die Struktur eines Webdokuments mit Standardsemantik beschreiben können. In diesem Dokument werden diese Elemente beschrieben und wie man sie einsetzt, um die gewünschte Gliederung für ein Dokument zu definieren.

- -

Dokumentstruktur in HTML 4

- -

Die Struktur eines Dokuments, d. h. die semantische Struktur dessen, was sich zwischen <body> und </body> befindet, ist von grundlegender Bedeutung, um dem Benutzer eine Seite zu präsentieren. HTML4 verwendet den Begriff der Abschnitte und Unterabschnitte eines Dokuments, um seine Struktur zu beschreiben. Ein Abschnitt wird definiert durch ein Element ({{HTMLElement("div")}}) mit darin enthaltenen Überschriftenelementen ({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}} oder {{HTMLElement("h6")}}) die dessen Titel definieren. Die Beziehungen dieser Elemente führen zur Struktur des Dokuments und seiner Gliederung.

- -

Folgendes Markup:

- -
<div class="section" id="forest-elephants" >
-  <h1>Forest elephants</h1>
-  <p>In this section, we discuss the lesser known forest elephants.
-    ...this section continues...
-  <div class="subsection" id="forest-habitat" >
-    <h2>Habitat</h2>
-    <p>Forest elephants do not live in trees but among them.
-     ...this subsection continues...
-  </div>
-</div> 
- -

führt zu folgender Gliederung (ohne die implizierten Ebenennummern):

- -
1. Forest elephants
-   1.1 Habitat
-
- -

Die {{HTMLElement("div")}}-Elemente sind nicht zwingend erforderlich, um einen neuen Abschnitt zu definieren. Die bloße Anwesenheit eines Überschriftselements reicht aus, um einen neuen Abschnitt anzuzeigen. Deshalb führt:

- -
<h1>Forest elephants</h1>
-  <p>In this section, we discuss the lesser known forest elephants.
-    ...this section continues...
-  <h2>Habitat</h2>
-  <p>Forest elephants do not live in trees but among them.
-    ...this subsection continues...
-  <h2>Diet</h2>
-<h1>Mongolian gerbils</h1>
-
- -

zu folgender Gliederung:

- -
1. Forest elephants
-   1.1 Habitat
-   1.2 Diet
-2. Mongolian gerbils
-
- -

Durch HTML5 gelöste Probleme

- -

Die HTML 4-Definition der Struktur eines Dokuments und seines implizierten Umrißalgorithmus ist sehr grob und führt zu zahlreichen Problemen:

- -
    -
  1. Die Verwendung von {{HTMLElement("div")}} zum Definieren semantischer Abschnitte ohne Definieren bestimmter Werte für die Klassenattribute macht die Automatisierung des Gliederungsalgorithmus unmöglich ("Ist dieses {{HTMLElement("div")}} Teil der Gliederung der Seite, definiert es einen Abschnitt oder einen Unterabschnitt?" oder "Dient dieses {{HTMLElement("div")}} rein der Präsentation, um nur Styles darauf anzuwenden?"). Mit anderen Worten, die HTML4-Spezifikation ist sehr ungenau, was ein Abschnitt ist und wie sein Geltungsbereich definiert ist. Die automatische Generierung von Gliederungen ist insbesondere für {{interwiki("wikipedia", "Unterstützungstechnologie")}} wichtig, die die Art und Weise, in der sie den Benutzern Informationen präsentieren, an die Struktur des Dokuments anpassen können. HTML5 macht {{HTMLElement("div")}}-Elemente für den Gliederungsalgorithmus überflüssig und führt für Abschnitte das neue HTML-Element {{HTMLElement("section")}} ein.
    2. -
  2. Das Zusammenführen mehrerer Dokumente ist schwierig: Wenn Sie ein Unterdokument in ein Hauptdokument einfügen, müssen Sie die Ebene des HTML-Überschriftenelements so ändern, dass die Gliederung erhalten bleibt. Dies wird in HTML5 gelöst, da die neu eingeführten Abschnittselemente ({{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}} und {{HTMLElement("aside")}}) immer Unterabschnitte ihres nächsten Vorfahrenabschnitts sind, unabhängig davon, welche Abschnitte durch interne Überschriften erstellt werden.
    3. -
  3. In HTML4 ist jeder Abschnitt Teil der Dokumentgliederung. Dokumente sind jedoch oft nicht so linear. Ein Dokument kann spezielle Abschnitte mit Informationen enthalten, die nicht Teil des Hauptflusses sind, bspw. ein Werbeblock oder ein Erklärungsfeld. HTML5 führt das Element {{HTMLElement("aside")}} ein, sodass solche Abschnitte von der Hauptgliederung ausgenommen werden können.
    4. -
  4. Da in HTML4 jeder Abschnitt Teil der Dokumentgliederung ist, gibt es keine Möglichkeit, Abschnitte mit Informationen zu haben, die sich nicht auf das Dokument, sondern auf die gesamte Website beziehen, wie Logos, Menüs, Inhaltsverzeichnisse oder Copyright-Informationen und rechtliche Hinweise. Zu diesem Zweck führt HTML5 drei neue Elemente ein: {{HTMLElement("nav")}} für Linksammlungen, z. B. für ein Inhaltsverzeichnis, und {{HTMLElement("footer")}} und {{HTMLElement("header")}} für Webseiten-bezogene Informationen. Beachten Sie, dass {{HTMLElement("header")}} und {{HTMLElement("footer")}} keine abschnittsweisen Inhalte wie {{HTMLElement("section")}} sind, sondern nur dazu dienen Teile eines Abschnitts semantisch zu markieren.
    5. -
- -

HTML5 verbessert allgemeinhin die Abschnitts- und Überschriftsfunktionen, sodass die Gliederungen von Dokumenten vorhersehbar sind und vom Browser verwendet werden können, um die Benutzererfahrung zu verbessern.

- -

Der HTML5-Gliederungsalgorithmus

- -
-

Wichtig: Es gibt keine Implementierungen des vorgeschlagenen Gliederungsalgorithmus in Webbrowsern oder Unterstützungstechnologie. Es war nie Teil einer endgültigen W3C-Spezifikation. Daher sollte der Gliederungsalgorithmus nicht verwendet werden, um den Benutzern die Dokumentstruktur zu vermitteln. Autoren sollten den Überschriftenrang (h1-h6) verwenden, um die Dokumentstruktur zu vermitteln.

-
- -

Betrachten wir die Algorithmen, die der Verarbeitung von Abschnitten und Gliederungen in HTML zugrunde liegen.

- -

Abschnitte definieren

- -

Der gesamte Inhalt des Elements {{HTMLElement("body")}} ist Teil eines Abschnitts. Abschnitte in HTML5 können verschachtelt sein. Neben dem durch das {{HTMLElement("body")}}-Element definierten Hauptabschnitt werden Abschnittsgrenzwerte entweder explizit oder implizit definiert. Ausdrücklich definierte Abschnitte sind der Inhalt der Tags {{HTMLElement("body")}}, {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}} und {{HTMLElement("nav")}}.

- -
Jeder Abschnitt kann eine eigene Überschriftenhierarchie haben. Daher kann auch ein verschachtelter Abschnitt ein {{HTMLElement("h1")}} haben. Siehe {{anch("Überschriften definieren")}}
- -

Sehen wir uns ein Beispiel an — hier haben wir ein Dokument mit einem Abschnitt und einer Fußzeile auf der obersten Ebene definiert. Innerhalb des Abschnitts der obersten Ebene haben wir drei Unterabschnitte, die durch zwei {{htmlelement("section")}}-Elemente und ein {{htmlelement("aside")}}-Element definiert werden:

- -
<section>
-
-  <h1>Forest elephants</h1>
-
-  <section>
-    <h1>Introduction</h1>
-    <p>In this section, we discuss the lesser known forest elephants.</p>
-  </section>
-
-  <section>
-    <h1>Habitat</h1>
-    <p>Forest elephants do not live in trees but among them.</p>
-  </section>
-
-  <aside>
-    <p>advertising block</p>
-  </aside>
-
-</section>
-
-<footer>
-  <p>(c) 2010 The Example company</p>
-</footer>
- -

Dies erzeugt folgende Gliederung:

- -
1. Forest elephants
-   1.1 Introduction
-   1.2 Habitat
-
- -

Überschriften definieren

- -
-

Wichtig: Es gibt keine Implementierungen des vorgeschlagenen Gliederungsalgorithmus in Webbrowsern oder Unterstützungstechnologie. Es war nie Teil einer endgültigen W3C-Spezifikation. Daher sollte der Gliederungsalgorithmus nicht verwendet werden, um den Benutzern die Dokumentstruktur zu vermitteln. Autoren sollten den Überschriftenrang (h1-h6) verwenden, um die Dokumentstruktur zu vermitteln.

-
- -

Während die HTML-Abschnittselemente die Struktur des Dokuments definieren, müssen für eine sinnvolle Gliederung auch Überschriften verwendet werden. Die Grundregel ist einfach: Das erste HTML-Überschriftenelement (eines von {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}) definiert die Überschrift des aktuellen Abschnitts.

- -

Die Überschriftenelemente haben einen Rang, der durch die Nummer im Elementnamen angegeben wird, wobei {{HTMLElement("h1")}} den höchsten Rang und {{HTMLElement("h6")}} den niedrigsten Rang hat. Die relative Rangordnung ist nur innerhalb eines Abschnitts von Bedeutung. Die Struktur der Abschnitte bestimmt die Gliederung, nicht die Rangfolge der Abschnitte. Betrachten Sie zum Beispiel diesen Code:

- -

 

- -
<section>
-  <h1>Forest elephants</h1>
-  <p>In this section, we discuss the lesser known forest elephants.
-    ...this section continues...
-  <section>
-    <h2>Habitat</h2>
-    <p>Forest elephants do not live in trees but among them.
-        ...this subsection continues...
-  </section>
-</section>
-<section>
-  <h3>Mongolian gerbils</h3>
-  <p>In this section, we discuss the famous mongolian gerbils.
-     ...this section continues...
-</section>
- -

Dies erzeugt folgende Gliederung:

- -
1. Forest elephants
-   1.1 Habitat
-2. Mongolian gerbils
- -

Beachten Sie, dass der Rang des Überschriftenelements (im Beispiel {{HTMLElement("h1")}} für den ersten Abschnitt der obersten Ebene, {{HTMLElement("h2")}} für den Unterabschnitt und {{HTMLElement("h3")}} für den zweiten Abschnitt der oberen Ebene) nicht wichtig ist (jeder Rang kann als Überschrift eines explizit definierten Abschnitts verwendet werden, obwohl dies nicht empfohlen wird).

- -

Implizierte Abschnitte

- -

 

- -

Da die HTML5-Abschnittselemente zum Definieren einer Gliederung nicht zwingend erforderlich sind, besteht die Möglichkeit Abschnitte ohne sie zu definieren, um die Kompatibilität mit HTML4 zu gewährleisten. Dies nennt man einen implizierten Abschnitt.

- -

Die Überschriftenelemente ({{HTMLElement("h1")}} bis {{HTMLElement("h6")}}) definieren einen neuen impliziten Abschnitt, wenn sie nicht die erste Überschrift ihrer übergeordneten, expliziten Abschnitte sind. Die Position dieses impliziten Abschnitts in der Gliederung wird durch seinen relativen Rang mit der vorherigen Überschrift im übergeordneten Abschnitt definiert. Wenn es einen niedrigeren Rang als die vorherige Überschrift hat, wird ein impliziter Unterabschnitt des Abschnitts geöffnet. Dieser Code:

- -

 

- -
<section>
-  <h1>Forest elephants</h1>
-  <p>In this section, we discuss the lesser known forest elephants.
-    ...this section continues...
-  <h3 class="implicit subsection">Habitat</h3>
-  <p>Forest elephants do not live in trees but among them.
-    ...this subsection continues...
-</section>
- -

erzeugt die Gliederung:

- -
1. Forest elephants
-   1.1 Habitat (implizit definiert durch das Element h3)
-
- -

Wenn es den gleichen Rang wie die vorherige Überschrift hat, schließt es den vorherigen Abschnitt (der möglicherweise explizit war!) und öffnet einen neuen impliziten Abschnitt auf derselben Ebene:

- -
<section>
-  <h1>Forest elephants</h1>
-  <p>In this section, we discuss the lesser known forest elephants.
-    ...this section continues...
-  <h1 class="implicit section">Mongolian gerbils</h1>
-  <p>Mongolian gerbils are cute little mammals.
-    ...this section continues...
-</section>
- -

erzeugt die Gliederung:

- -
1. Forest elephants
-2. Mongolian gerbils (implizit definiert durch das Element h1, wodurch gleichzeitig der vorherige Abschnitt geschlossen wurde)
-
- -

Wenn es einen höheren Rang als die vorherige Überschrift hat, schließt es den vorherigen Abschnitt und öffnet einen neuen impliziten auf der höheren Ebene:

- -
<body>
-  <h1>Mammals</h1>
-  <h2>Whales</h2>
-  <p>In this section, we discuss the swimming whales.
-    ...this section continues...
-  <section>
-    <h3>Forest elephants</h3>
-    <p>In this section, we discuss the lesser known forest elephants.
-      ...this section continues...
-    <h3>Mongolian gerbils</h3>
-      <p>Hordes of gerbils have spread their range far beyond Mongolia.
-         ...this subsection continues...
-    <h2>Reptiles</h2>
-      <p>Reptiles are animals with cold blood.
-          ...this section continues...
-  </section>
-</body>
- -

leading to the following outline:

- -
1. Mammals
-   1.1 Whales (implicitly defined by the h2 element)
-   1.2 Forest elephants (explicitly defined by the section element)
-   1.3 Mongolian gerbils (implicitly defined by the h3 element, which closes the previous section at the same time)
-2. Reptiles (implicitly defined by the h2 element, which closes the previous section at the same time)
-
- -

This is not the outline that one might expect by quickly glancing at the heading tags. To make your markup human-understandable, it is a good practice to use explicit tags for opening and closing sections, and to match the heading rank to the intended section nesting level. However, this is not required by the HTML5 specification. If you find that browsers are rendering your document outline in unexpected ways, check whether you have sections that are implicitly closed by heading elements.

- -

An exception to the rule of thumb that heading rank should match the section nesting level is for sections that may be reused in multiple documents. For example, a section might be stored in a content-management system and assembled into documents at run time. In this case, a good practice is to start at {{HTMLElement("h1")}} for the top heading level of the reusable section. The nesting level of the reusable section will be determined by the section hierarchy of the document in which it appears. Explicit section tags are still helpful in this case.

- -

Sectioning roots

- -

A sectioning root is an HTML element that can have its own outline, but the sections and headings inside it do not contribute to the outline of its ancestor. Besides {{HTMLElement("body")}} which is the logical sectioning root of a document, the following elements often introduce external content to the page: {{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, and {{HTMLElement("figure")}}.

- -

Example:

- -
<section>
-  <h1>Forest elephants</h1>
-  <section>
-    <h2>Introduction</h2>
-    <p>In this section, we discuss the lesser known forest elephants</p>
-  </section>
-  <section>
-    <h2>Habitat</h2>
-    <p>Forest elephants do not live in trees but among them. Let's
-       look what scientists are saying in "<cite>The Forest Elephant in Borneo</cite>":</p>
-    <blockquote>
-       <h1>Borneo</h1>
-       <p>The forest element lives in Borneo...</p>
-    </blockquote>
-  </section>
-</section>
-
- -

This example results in the following outline:

- -
1. Forest elephants
-   1.1 Introduction
-   1.2 Habitat
- -

This outline doesn't contain the internal outline of the {{HTMLElement("blockquote")}} element, which, being an external citation, is a sectioning root and isolates its internal outline.

- -

Sections outside the outline

- -

HTML5 introduces two new elements that allow defining sections that don't belong to the main outline of a web document:

- -
    -
  1. The HTML Aside Section Element ({{HTMLElement("aside")}}) defines a section that, though related to the main element, doesn't belong to the main flow, like an explanation box or an advertisement. It has its own outline, but doesn't belong to the main one.
    2. -
  2. The HTML Navigational Section Element ({{HTMLElement("nav")}}) defines a section that contains navigation links. There can be several of them in a document, for example one with page internal links like a table of contents, and another with site navigational links. These links are not part of the main document flow and outline, and are generally not initially rendered by screen readers and similar assistive technologies.
    3. -
- -

Headers and Footers

- -

HTML5 also introduces two new elements that can be used to mark up the header and the footer of a section:

- -
    -
  1. The HTML Header Element ({{HTMLElement("header")}}) defines a page header — typically containing the logo and name of the site and possibly a horizontal menu — or section header, containing perhaps the section's heading, author name, etc. {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, and {{HTMLElement("nav")}} can have their own {{HTMLElement("header")}}. Despite its name, it is not necessarily positioned at the beginning of the page or section.
    2. -
  2. The HTML Footer Element ({{HTMLElement("footer")}}) defines a page footer — typically containing the copyright and legal notices and sometimes some links — or section footer, containing perhaps the section's publication date, license information, etc. {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, and {{HTMLElement("nav")}} can have their own {{HTMLElement("footer")}}. Despite its name, it is not necessarily positioned at the end of the page or section.
    3. -
- -

These do not create new sections in the outline, rather, they mark up content inside sections of the page.

- -

Addresses in sectioning elements

- -

The author of a document often wants to publish some contact information, such as the author's name and address. HTML4 allowed this via the {{HTMLElement("address")}} element, which has been extended in HTML5.

- -

A document can be made of different sections from different authors. A section from another author than the one of the main page is defined using the {{HTMLElement("article")}} element. Consequently, the {{HTMLElement("address")}} element is now linked to its nearest {{HTMLElement("body")}} or {{HTMLElement("article")}} ancestor.

- -

Using HTML5 elements in non-HTML5 browsers

- -

Sections and headings elements can be made to work in most non-HTML5 browsers with a couple of extra steps, and in this section we'll show you how. If a significant percentage of your particular target audience is using Internet Explorer 8 or older, then you can follow the below instructions to make them behave as expected. However, global usage of these browsers is now very small, so this is unlikely.

- -

HTML5 semantic elements don't need a special DOM interface, but they will need a specific CSS styling in older browser that don't support them explicitly. Unknown elements are styled as display:inline by default, so you'll want to set them to display: block:

- -
article, aside, footer, header, nav, section {
-  display:block;
-}
-
- -

Of course the web developer can style them differently, but keep in mind that in a non-HTML5 browser, the default styling is different from what is expected for such elements. Also note that the {{HTMLElement("time")}} element has not been included, because the default styling for it in a non-HTML5 browser is the same as the one in an HTML5-compatible one.

- -

Next up, older IE versions do not allow styling of unsupported elements, unless you create an instance of them in the DOM. You can add a specific script to allow this, as seen below:

- -
<!--[if lt IE 9]>
-  <script>
-    document.createElement("article");
-    document.createElement("aside");
-    document.createElement("footer");
-    document.createElement("header");
-    document.createElement("nav");
-    document.createElement("section");
-    document.createElement("time");
-  </script>
-<![endif]-->
-
- -

As a last precaution, you could also add an explicit {{HTMLElement("noscript")}} element inside the {{HTMLElement("head")}} element to warn any users that have JavaScript disabled that your page relies on JavaScript:

- -
<noscript>
-  <p><strong>This web page requires JavaScript to be enabled.</strong></p>
-  <p>JavaScript is an object-oriented computer programming language
-    commonly used to create interactive effects within web browsers.</p>
-  <p><a href="https://goo.gl/koeeaJ">How to enable JavaScript?</a></p>
-</noscript>
-
- -

This leads to the following code to allow the support of the HTML5 sections and headings elements in non-HTML5 browsers, even for Internet Explorer (8 and older), with a proper fallback for the case where this latter browser is configured not to use scripting:

- -
<!--[if lt IE 9]>
-  <script>
-    document.createElement("article");
-    document.createElement("aside");
-    document.createElement("footer");
-    document.createElement("header");
-    document.createElement("nav");
-    document.createElement("section");
-    document.createElement("time");
-  </script>
-<![endif]-->
-<noscript>
-  <p><strong>This web page requires JavaScript to be enabled.</strong></p>
-  <p>JavaScript is an object-oriented computer programming language
-    commonly used to create interactive effects within web browsers.</p>
-  <p><a href="https://goo.gl/koeeaJ">How to enable JavaScript?</a></p>
-</noscript>
-
- -
-

Note: This code will also cause the HTML validator to return errors. This isn't a really bad thing neccessarily — sites will often have a few validation errors — but it something to be aware of still.

-
- -

Conclusion

- -

The new semantic elements introduced in HTML5 bring the ability to describe the structure of a web document in a standard way. They bring a big advantage for people having HTML5 browsers and needing the structure to help them understand the page, for instance people needing the help of some assistive technology. These new semantic elements are simple to use and, with very few burdens, can be made to work also in non-HTML5 browsers. Therefore they should be used without restrictions.

diff --git a/files/de/web/guide/html/using_html_sections_and_outlines/index.html b/files/de/web/guide/html/using_html_sections_and_outlines/index.html new file mode 100644 index 0000000000..882a3333dc --- /dev/null +++ b/files/de/web/guide/html/using_html_sections_and_outlines/index.html @@ -0,0 +1,351 @@ +--- +title: Verwendung von HTML-Abschnitten und -Gliederungen +slug: Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document +translation_of: Web/Guide/HTML/Using_HTML_sections_and_outlines +--- +
{{HTMLSidebar}}
+ +
+

Wichtig: Es gibt keine Implementierungen des vorgeschlagenen Gliederungsalgorithmus in Webbrowsern oder Unterstützungstechnologie. Es war nie Teil einer endgültigen W3C-Spezifikation. Daher sollte der Gliederungsalgorithmus nicht verwendet werden, um den Benutzern die Dokumentstruktur zu vermitteln. Autoren sollten den Überschriftenrang (h1-h6) verwenden, um die Dokumentstruktur zu vermitteln.

+
+ +

Die HTML5-Spezifikation bietet Webentwicklern mehrere neue Elemente, mit denen sie die Struktur eines Webdokuments mit Standardsemantik beschreiben können. In diesem Dokument werden diese Elemente beschrieben und wie man sie einsetzt, um die gewünschte Gliederung für ein Dokument zu definieren.

+ +

Dokumentstruktur in HTML 4

+ +

Die Struktur eines Dokuments, d. h. die semantische Struktur dessen, was sich zwischen <body> und </body> befindet, ist von grundlegender Bedeutung, um dem Benutzer eine Seite zu präsentieren. HTML4 verwendet den Begriff der Abschnitte und Unterabschnitte eines Dokuments, um seine Struktur zu beschreiben. Ein Abschnitt wird definiert durch ein Element ({{HTMLElement("div")}}) mit darin enthaltenen Überschriftenelementen ({{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}} oder {{HTMLElement("h6")}}) die dessen Titel definieren. Die Beziehungen dieser Elemente führen zur Struktur des Dokuments und seiner Gliederung.

+ +

Folgendes Markup:

+ +
<div class="section" id="forest-elephants" >
+  <h1>Forest elephants</h1>
+  <p>In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  <div class="subsection" id="forest-habitat" >
+    <h2>Habitat</h2>
+    <p>Forest elephants do not live in trees but among them.
+     ...this subsection continues...
+  </div>
+</div> 
+ +

führt zu folgender Gliederung (ohne die implizierten Ebenennummern):

+ +
1. Forest elephants
+   1.1 Habitat
+
+ +

Die {{HTMLElement("div")}}-Elemente sind nicht zwingend erforderlich, um einen neuen Abschnitt zu definieren. Die bloße Anwesenheit eines Überschriftselements reicht aus, um einen neuen Abschnitt anzuzeigen. Deshalb führt:

+ +
<h1>Forest elephants</h1>
+  <p>In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  <h2>Habitat</h2>
+  <p>Forest elephants do not live in trees but among them.
+    ...this subsection continues...
+  <h2>Diet</h2>
+<h1>Mongolian gerbils</h1>
+
+ +

zu folgender Gliederung:

+ +
1. Forest elephants
+   1.1 Habitat
+   1.2 Diet
+2. Mongolian gerbils
+
+ +

Durch HTML5 gelöste Probleme

+ +

Die HTML 4-Definition der Struktur eines Dokuments und seines implizierten Umrißalgorithmus ist sehr grob und führt zu zahlreichen Problemen:

+ +
    +
  1. Die Verwendung von {{HTMLElement("div")}} zum Definieren semantischer Abschnitte ohne Definieren bestimmter Werte für die Klassenattribute macht die Automatisierung des Gliederungsalgorithmus unmöglich ("Ist dieses {{HTMLElement("div")}} Teil der Gliederung der Seite, definiert es einen Abschnitt oder einen Unterabschnitt?" oder "Dient dieses {{HTMLElement("div")}} rein der Präsentation, um nur Styles darauf anzuwenden?"). Mit anderen Worten, die HTML4-Spezifikation ist sehr ungenau, was ein Abschnitt ist und wie sein Geltungsbereich definiert ist. Die automatische Generierung von Gliederungen ist insbesondere für {{interwiki("wikipedia", "Unterstützungstechnologie")}} wichtig, die die Art und Weise, in der sie den Benutzern Informationen präsentieren, an die Struktur des Dokuments anpassen können. HTML5 macht {{HTMLElement("div")}}-Elemente für den Gliederungsalgorithmus überflüssig und führt für Abschnitte das neue HTML-Element {{HTMLElement("section")}} ein.
    2. +
  2. Das Zusammenführen mehrerer Dokumente ist schwierig: Wenn Sie ein Unterdokument in ein Hauptdokument einfügen, müssen Sie die Ebene des HTML-Überschriftenelements so ändern, dass die Gliederung erhalten bleibt. Dies wird in HTML5 gelöst, da die neu eingeführten Abschnittselemente ({{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("nav")}} und {{HTMLElement("aside")}}) immer Unterabschnitte ihres nächsten Vorfahrenabschnitts sind, unabhängig davon, welche Abschnitte durch interne Überschriften erstellt werden.
    3. +
  3. In HTML4 ist jeder Abschnitt Teil der Dokumentgliederung. Dokumente sind jedoch oft nicht so linear. Ein Dokument kann spezielle Abschnitte mit Informationen enthalten, die nicht Teil des Hauptflusses sind, bspw. ein Werbeblock oder ein Erklärungsfeld. HTML5 führt das Element {{HTMLElement("aside")}} ein, sodass solche Abschnitte von der Hauptgliederung ausgenommen werden können.
    4. +
  4. Da in HTML4 jeder Abschnitt Teil der Dokumentgliederung ist, gibt es keine Möglichkeit, Abschnitte mit Informationen zu haben, die sich nicht auf das Dokument, sondern auf die gesamte Website beziehen, wie Logos, Menüs, Inhaltsverzeichnisse oder Copyright-Informationen und rechtliche Hinweise. Zu diesem Zweck führt HTML5 drei neue Elemente ein: {{HTMLElement("nav")}} für Linksammlungen, z. B. für ein Inhaltsverzeichnis, und {{HTMLElement("footer")}} und {{HTMLElement("header")}} für Webseiten-bezogene Informationen. Beachten Sie, dass {{HTMLElement("header")}} und {{HTMLElement("footer")}} keine abschnittsweisen Inhalte wie {{HTMLElement("section")}} sind, sondern nur dazu dienen Teile eines Abschnitts semantisch zu markieren.
    5. +
+ +

HTML5 verbessert allgemeinhin die Abschnitts- und Überschriftsfunktionen, sodass die Gliederungen von Dokumenten vorhersehbar sind und vom Browser verwendet werden können, um die Benutzererfahrung zu verbessern.

+ +

Der HTML5-Gliederungsalgorithmus

+ +
+

Wichtig: Es gibt keine Implementierungen des vorgeschlagenen Gliederungsalgorithmus in Webbrowsern oder Unterstützungstechnologie. Es war nie Teil einer endgültigen W3C-Spezifikation. Daher sollte der Gliederungsalgorithmus nicht verwendet werden, um den Benutzern die Dokumentstruktur zu vermitteln. Autoren sollten den Überschriftenrang (h1-h6) verwenden, um die Dokumentstruktur zu vermitteln.

+
+ +

Betrachten wir die Algorithmen, die der Verarbeitung von Abschnitten und Gliederungen in HTML zugrunde liegen.

+ +

Abschnitte definieren

+ +

Der gesamte Inhalt des Elements {{HTMLElement("body")}} ist Teil eines Abschnitts. Abschnitte in HTML5 können verschachtelt sein. Neben dem durch das {{HTMLElement("body")}}-Element definierten Hauptabschnitt werden Abschnittsgrenzwerte entweder explizit oder implizit definiert. Ausdrücklich definierte Abschnitte sind der Inhalt der Tags {{HTMLElement("body")}}, {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}} und {{HTMLElement("nav")}}.

+ +
Jeder Abschnitt kann eine eigene Überschriftenhierarchie haben. Daher kann auch ein verschachtelter Abschnitt ein {{HTMLElement("h1")}} haben. Siehe {{anch("Überschriften definieren")}}
+ +

Sehen wir uns ein Beispiel an — hier haben wir ein Dokument mit einem Abschnitt und einer Fußzeile auf der obersten Ebene definiert. Innerhalb des Abschnitts der obersten Ebene haben wir drei Unterabschnitte, die durch zwei {{htmlelement("section")}}-Elemente und ein {{htmlelement("aside")}}-Element definiert werden:

+ +
<section>
+
+  <h1>Forest elephants</h1>
+
+  <section>
+    <h1>Introduction</h1>
+    <p>In this section, we discuss the lesser known forest elephants.</p>
+  </section>
+
+  <section>
+    <h1>Habitat</h1>
+    <p>Forest elephants do not live in trees but among them.</p>
+  </section>
+
+  <aside>
+    <p>advertising block</p>
+  </aside>
+
+</section>
+
+<footer>
+  <p>(c) 2010 The Example company</p>
+</footer>
+ +

Dies erzeugt folgende Gliederung:

+ +
1. Forest elephants
+   1.1 Introduction
+   1.2 Habitat
+
+ +

Überschriften definieren

+ +
+

Wichtig: Es gibt keine Implementierungen des vorgeschlagenen Gliederungsalgorithmus in Webbrowsern oder Unterstützungstechnologie. Es war nie Teil einer endgültigen W3C-Spezifikation. Daher sollte der Gliederungsalgorithmus nicht verwendet werden, um den Benutzern die Dokumentstruktur zu vermitteln. Autoren sollten den Überschriftenrang (h1-h6) verwenden, um die Dokumentstruktur zu vermitteln.

+
+ +

Während die HTML-Abschnittselemente die Struktur des Dokuments definieren, müssen für eine sinnvolle Gliederung auch Überschriften verwendet werden. Die Grundregel ist einfach: Das erste HTML-Überschriftenelement (eines von {{HTMLElement("h1")}}, {{HTMLElement("h2")}}, {{HTMLElement("h3")}}, {{HTMLElement("h4")}}, {{HTMLElement("h5")}}, {{HTMLElement("h6")}}) definiert die Überschrift des aktuellen Abschnitts.

+ +

Die Überschriftenelemente haben einen Rang, der durch die Nummer im Elementnamen angegeben wird, wobei {{HTMLElement("h1")}} den höchsten Rang und {{HTMLElement("h6")}} den niedrigsten Rang hat. Die relative Rangordnung ist nur innerhalb eines Abschnitts von Bedeutung. Die Struktur der Abschnitte bestimmt die Gliederung, nicht die Rangfolge der Abschnitte. Betrachten Sie zum Beispiel diesen Code:

+ +

 

+ +
<section>
+  <h1>Forest elephants</h1>
+  <p>In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  <section>
+    <h2>Habitat</h2>
+    <p>Forest elephants do not live in trees but among them.
+        ...this subsection continues...
+  </section>
+</section>
+<section>
+  <h3>Mongolian gerbils</h3>
+  <p>In this section, we discuss the famous mongolian gerbils.
+     ...this section continues...
+</section>
+ +

Dies erzeugt folgende Gliederung:

+ +
1. Forest elephants
+   1.1 Habitat
+2. Mongolian gerbils
+ +

Beachten Sie, dass der Rang des Überschriftenelements (im Beispiel {{HTMLElement("h1")}} für den ersten Abschnitt der obersten Ebene, {{HTMLElement("h2")}} für den Unterabschnitt und {{HTMLElement("h3")}} für den zweiten Abschnitt der oberen Ebene) nicht wichtig ist (jeder Rang kann als Überschrift eines explizit definierten Abschnitts verwendet werden, obwohl dies nicht empfohlen wird).

+ +

Implizierte Abschnitte

+ +

 

+ +

Da die HTML5-Abschnittselemente zum Definieren einer Gliederung nicht zwingend erforderlich sind, besteht die Möglichkeit Abschnitte ohne sie zu definieren, um die Kompatibilität mit HTML4 zu gewährleisten. Dies nennt man einen implizierten Abschnitt.

+ +

Die Überschriftenelemente ({{HTMLElement("h1")}} bis {{HTMLElement("h6")}}) definieren einen neuen impliziten Abschnitt, wenn sie nicht die erste Überschrift ihrer übergeordneten, expliziten Abschnitte sind. Die Position dieses impliziten Abschnitts in der Gliederung wird durch seinen relativen Rang mit der vorherigen Überschrift im übergeordneten Abschnitt definiert. Wenn es einen niedrigeren Rang als die vorherige Überschrift hat, wird ein impliziter Unterabschnitt des Abschnitts geöffnet. Dieser Code:

+ +

 

+ +
<section>
+  <h1>Forest elephants</h1>
+  <p>In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  <h3 class="implicit subsection">Habitat</h3>
+  <p>Forest elephants do not live in trees but among them.
+    ...this subsection continues...
+</section>
+ +

erzeugt die Gliederung:

+ +
1. Forest elephants
+   1.1 Habitat (implizit definiert durch das Element h3)
+
+ +

Wenn es den gleichen Rang wie die vorherige Überschrift hat, schließt es den vorherigen Abschnitt (der möglicherweise explizit war!) und öffnet einen neuen impliziten Abschnitt auf derselben Ebene:

+ +
<section>
+  <h1>Forest elephants</h1>
+  <p>In this section, we discuss the lesser known forest elephants.
+    ...this section continues...
+  <h1 class="implicit section">Mongolian gerbils</h1>
+  <p>Mongolian gerbils are cute little mammals.
+    ...this section continues...
+</section>
+ +

erzeugt die Gliederung:

+ +
1. Forest elephants
+2. Mongolian gerbils (implizit definiert durch das Element h1, wodurch gleichzeitig der vorherige Abschnitt geschlossen wurde)
+
+ +

Wenn es einen höheren Rang als die vorherige Überschrift hat, schließt es den vorherigen Abschnitt und öffnet einen neuen impliziten auf der höheren Ebene:

+ +
<body>
+  <h1>Mammals</h1>
+  <h2>Whales</h2>
+  <p>In this section, we discuss the swimming whales.
+    ...this section continues...
+  <section>
+    <h3>Forest elephants</h3>
+    <p>In this section, we discuss the lesser known forest elephants.
+      ...this section continues...
+    <h3>Mongolian gerbils</h3>
+      <p>Hordes of gerbils have spread their range far beyond Mongolia.
+         ...this subsection continues...
+    <h2>Reptiles</h2>
+      <p>Reptiles are animals with cold blood.
+          ...this section continues...
+  </section>
+</body>
+ +

leading to the following outline:

+ +
1. Mammals
+   1.1 Whales (implicitly defined by the h2 element)
+   1.2 Forest elephants (explicitly defined by the section element)
+   1.3 Mongolian gerbils (implicitly defined by the h3 element, which closes the previous section at the same time)
+2. Reptiles (implicitly defined by the h2 element, which closes the previous section at the same time)
+
+ +

This is not the outline that one might expect by quickly glancing at the heading tags. To make your markup human-understandable, it is a good practice to use explicit tags for opening and closing sections, and to match the heading rank to the intended section nesting level. However, this is not required by the HTML5 specification. If you find that browsers are rendering your document outline in unexpected ways, check whether you have sections that are implicitly closed by heading elements.

+ +

An exception to the rule of thumb that heading rank should match the section nesting level is for sections that may be reused in multiple documents. For example, a section might be stored in a content-management system and assembled into documents at run time. In this case, a good practice is to start at {{HTMLElement("h1")}} for the top heading level of the reusable section. The nesting level of the reusable section will be determined by the section hierarchy of the document in which it appears. Explicit section tags are still helpful in this case.

+ +

Sectioning roots

+ +

A sectioning root is an HTML element that can have its own outline, but the sections and headings inside it do not contribute to the outline of its ancestor. Besides {{HTMLElement("body")}} which is the logical sectioning root of a document, the following elements often introduce external content to the page: {{HTMLElement("blockquote")}}, {{HTMLElement("details")}}, {{HTMLElement("fieldset")}}, and {{HTMLElement("figure")}}.

+ +

Example:

+ +
<section>
+  <h1>Forest elephants</h1>
+  <section>
+    <h2>Introduction</h2>
+    <p>In this section, we discuss the lesser known forest elephants</p>
+  </section>
+  <section>
+    <h2>Habitat</h2>
+    <p>Forest elephants do not live in trees but among them. Let's
+       look what scientists are saying in "<cite>The Forest Elephant in Borneo</cite>":</p>
+    <blockquote>
+       <h1>Borneo</h1>
+       <p>The forest element lives in Borneo...</p>
+    </blockquote>
+  </section>
+</section>
+
+ +

This example results in the following outline:

+ +
1. Forest elephants
+   1.1 Introduction
+   1.2 Habitat
+ +

This outline doesn't contain the internal outline of the {{HTMLElement("blockquote")}} element, which, being an external citation, is a sectioning root and isolates its internal outline.

+ +

Sections outside the outline

+ +

HTML5 introduces two new elements that allow defining sections that don't belong to the main outline of a web document:

+ +
    +
  1. The HTML Aside Section Element ({{HTMLElement("aside")}}) defines a section that, though related to the main element, doesn't belong to the main flow, like an explanation box or an advertisement. It has its own outline, but doesn't belong to the main one.
    2. +
  2. The HTML Navigational Section Element ({{HTMLElement("nav")}}) defines a section that contains navigation links. There can be several of them in a document, for example one with page internal links like a table of contents, and another with site navigational links. These links are not part of the main document flow and outline, and are generally not initially rendered by screen readers and similar assistive technologies.
    3. +
+ +

Headers and Footers

+ +

HTML5 also introduces two new elements that can be used to mark up the header and the footer of a section:

+ +
    +
  1. The HTML Header Element ({{HTMLElement("header")}}) defines a page header — typically containing the logo and name of the site and possibly a horizontal menu — or section header, containing perhaps the section's heading, author name, etc. {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, and {{HTMLElement("nav")}} can have their own {{HTMLElement("header")}}. Despite its name, it is not necessarily positioned at the beginning of the page or section.
    2. +
  2. The HTML Footer Element ({{HTMLElement("footer")}}) defines a page footer — typically containing the copyright and legal notices and sometimes some links — or section footer, containing perhaps the section's publication date, license information, etc. {{HTMLElement("article")}}, {{HTMLElement("section")}}, {{HTMLElement("aside")}}, and {{HTMLElement("nav")}} can have their own {{HTMLElement("footer")}}. Despite its name, it is not necessarily positioned at the end of the page or section.
    3. +
+ +

These do not create new sections in the outline, rather, they mark up content inside sections of the page.

+ +

Addresses in sectioning elements

+ +

The author of a document often wants to publish some contact information, such as the author's name and address. HTML4 allowed this via the {{HTMLElement("address")}} element, which has been extended in HTML5.

+ +

A document can be made of different sections from different authors. A section from another author than the one of the main page is defined using the {{HTMLElement("article")}} element. Consequently, the {{HTMLElement("address")}} element is now linked to its nearest {{HTMLElement("body")}} or {{HTMLElement("article")}} ancestor.

+ +

Using HTML5 elements in non-HTML5 browsers

+ +

Sections and headings elements can be made to work in most non-HTML5 browsers with a couple of extra steps, and in this section we'll show you how. If a significant percentage of your particular target audience is using Internet Explorer 8 or older, then you can follow the below instructions to make them behave as expected. However, global usage of these browsers is now very small, so this is unlikely.

+ +

HTML5 semantic elements don't need a special DOM interface, but they will need a specific CSS styling in older browser that don't support them explicitly. Unknown elements are styled as display:inline by default, so you'll want to set them to display: block:

+ +
article, aside, footer, header, nav, section {
+  display:block;
+}
+
+ +

Of course the web developer can style them differently, but keep in mind that in a non-HTML5 browser, the default styling is different from what is expected for such elements. Also note that the {{HTMLElement("time")}} element has not been included, because the default styling for it in a non-HTML5 browser is the same as the one in an HTML5-compatible one.

+ +

Next up, older IE versions do not allow styling of unsupported elements, unless you create an instance of them in the DOM. You can add a specific script to allow this, as seen below:

+ +
<!--[if lt IE 9]>
+  <script>
+    document.createElement("article");
+    document.createElement("aside");
+    document.createElement("footer");
+    document.createElement("header");
+    document.createElement("nav");
+    document.createElement("section");
+    document.createElement("time");
+  </script>
+<![endif]-->
+
+ +

As a last precaution, you could also add an explicit {{HTMLElement("noscript")}} element inside the {{HTMLElement("head")}} element to warn any users that have JavaScript disabled that your page relies on JavaScript:

+ +
<noscript>
+  <p><strong>This web page requires JavaScript to be enabled.</strong></p>
+  <p>JavaScript is an object-oriented computer programming language
+    commonly used to create interactive effects within web browsers.</p>
+  <p><a href="https://goo.gl/koeeaJ">How to enable JavaScript?</a></p>
+</noscript>
+
+ +

This leads to the following code to allow the support of the HTML5 sections and headings elements in non-HTML5 browsers, even for Internet Explorer (8 and older), with a proper fallback for the case where this latter browser is configured not to use scripting:

+ +
<!--[if lt IE 9]>
+  <script>
+    document.createElement("article");
+    document.createElement("aside");
+    document.createElement("footer");
+    document.createElement("header");
+    document.createElement("nav");
+    document.createElement("section");
+    document.createElement("time");
+  </script>
+<![endif]-->
+<noscript>
+  <p><strong>This web page requires JavaScript to be enabled.</strong></p>
+  <p>JavaScript is an object-oriented computer programming language
+    commonly used to create interactive effects within web browsers.</p>
+  <p><a href="https://goo.gl/koeeaJ">How to enable JavaScript?</a></p>
+</noscript>
+
+ +
+

Note: This code will also cause the HTML validator to return errors. This isn't a really bad thing neccessarily — sites will often have a few validation errors — but it something to be aware of still.

+
+ +

Conclusion

+ +

The new semantic elements introduced in HTML5 bring the ability to describe the structure of a web document in a standard way. They bring a big advantage for people having HTML5 browsers and needing the structure to help them understand the page, for instance people needing the help of some assistive technology. These new semantic elements are simple to use and, with very few burdens, can be made to work also in non-HTML5 browsers. Therefore they should be used without restrictions.

-- cgit v1.2.3-54-g00ecf