Grundlegende Verwendung von Canvas

Das <canvas>-Element

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

Auf den ersten Blick sieht ein <canvas>-Element dem <img>-Element hnlich, mit dem einzigen deutlichen Unterschied, dass es keine src- und alt-Attribute hat. Tatschlich hat das <canvas>-Element nur zwei Attribute, width und height. Diese sind beide optional und knnen auch mithilfe von DOM-Eigenschaften festgelegt werden. Wenn keine width- und height-Attribute angegeben sind, ist der Canvas standardmig 300 Pixel breit und 150 Pixel hoch. Das Element kann beliebig per CSS dimensioniert werden, aber whrend des Renderns wird das Bild so skaliert, dass es seiner Layoutgre entspricht: Wenn die CSS-Grenverhltnisse das anfngliche Canvas-Verhltnis nicht respektieren, wird es verzerrt erscheinen.

Das id-Attribut ist nicht spezifisch fr das <canvas>-Element, sondern eines der globalen HTML-Attribute, die auf jedes HTML-Element angewendet werden knnen (wie z. B. class). Es ist immer eine gute Idee, eine id anzugeben, da es dadurch viel einfacher wird, es in einem Skript zu identifizieren.

Das <canvas>-Element kann wie jedes normale Bild gestaltet werden (margin, border, background). Diese Regeln beeinflussen jedoch nicht die eigentliche Zeichnung auf dem Canvas. Wir werden sehen, wie dies in einem eigenen Kapitel dieses Tutorials gemacht wird. Wenn keine stilistischen Regeln auf den Canvas angewendet werden, ist er anfangs vollstndig transparent.

Barrierefreier Inhalt

Das <canvas>-Element muss ebenso wie die Elemente <img>, <video>, <audio> und <picture> barrierefrei gemacht werden, indem Ersatztext bereitgestellt wird, der angezeigt wird, wenn das Medium nicht geladen wird oder der Benutzer es nicht wie beabsichtigt erleben kann. Sie sollten immer Ersatzinhalte, Untertitel und alternativen Text bereitstellen, die fr den Medientyp geeignet sind.

Das Bereitstellen von Ersatzinhalt ist sehr einfach: Fgen Sie einfach den alternativen Inhalt in das <canvas>-Element ein, damit Bildschirmleser, Suchmaschinen und andere automatische Bots darauf zugreifen knnen. Browser ignorieren standardmig den Inhalt im Container und rendern den Canvas normal, es sei denn, <canvas> wird nicht untersttzt.

Zum Beispiel knnten wir eine Textbeschreibung des Canvas-Inhalts bereitstellen oder ein statisches Bild des dynamisch gerenderten Inhalts verwenden. Dies knnte so aussehen:

<canvas id="stockGraph" width="150" height="150">
  current stock price: $3.15 + 0.15
</canvas>

<canvas id="clock" width="150" height="150">
  <img src="images/clock.png" width="150" height="150" alt="A clock" />
</canvas>

Den Benutzer darauf hinzuweisen, einen anderen Browser zu verwenden, der Canvas untersttzt, hilft Nutzern nicht, die den Canvas berhaupt nicht lesen knnen. Das Bereitstellen von ntzlichem Ersatztext oder zustzlichem DOM verbessert die Zugnglichkeit eines ansonsten nicht zugnglichen Elements.

Erforderliches </canvas>-Tag

Aufgrund der Art und Weise, wie Ersatz bereitgestellt wird, erfordert das <canvas>-Element im Gegensatz zum <img>-Element das abschlieende Tag (</canvas>). Wenn dieses Tag nicht vorhanden ist, wrde der Rest des Dokuments als Ersatzinhalt betrachtet und nicht angezeigt werden.

Wenn kein Ersatzinhalt bentigt wird, ist ein einfaches <canvas id="foo" role="presentation" ></canvas> vollstndig kompatibel mit allen Browsern, die Canvas berhaupt untersttzen. Dies sollte nur verwendet werden, wenn der Canvas rein darstellend ist.

Der Rendering-Kontext

Das <canvas>-Element erstellt eine Zeichenflche mit fester Gre, die einen oder mehrere Rendering-Kontexte bereitstellt, die verwendet werden, um den angezeigten Inhalt zu erstellen und zu manipulieren. In diesem Tutorial konzentrieren wir uns auf den 2D-Rendering-Kontext. Andere Kontexte knnen unterschiedliche Arten des Renderings bereitstellen; zum Beispiel verwendet WebGL einen 3D-Kontext basierend auf OpenGL ES.

Der Canvas ist anfangs leer. Um etwas anzuzeigen, muss ein Skript zuerst auf den Rendering-Kontext zugreifen und darauf zeichnen. Das <canvas>-Element hat eine Methode namens getContext(), die verwendet wird, um den Rendering-Kontext und seine Zeichenfunktionen zu erhalten. getContext() nimmt einen Parameter, den Typ des Kontexts. Fr 2D-Grafiken, wie sie in diesem Tutorial behandelt werden, geben Sie "2d" an, um einen CanvasRenderingContext2D zu erhalten.

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

Die erste Zeile im Skript ruft den Knoten im DOM ab, der das <canvas>-Element darstellt, indem die Methode document.getElementById() aufgerufen wird. Sobald Sie den Elementknoten haben, knnen Sie ber seine getContext()-Methode auf den Zeichenkontext zugreifen.

Prfung auf Untersttzung

Der Ersatzinhalt wird in Browsern angezeigt, die <canvas> nicht untersttzen. Skripte knnen auch programmgesteuert auf Untersttzung prfen, indem sie das Vorhandensein der getContext()-Methode testen. Unser obiger Code-Schnipsel wird zu etwa Folgendem:

const canvas = document.getElementById("canvas");

if (canvas.getContext) {
  const ctx = canvas.getContext("2d");
  // drawing code here
} else {
  // canvas-unsupported code here
}

Eine Skelettvorlage

Hier ist eine minimalistische Vorlage, die wir als Ausgangspunkt fr sptere Beispiele verwenden werden.

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>Canvas tutorial</title>
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="150" height="150"></canvas>
    <script>
      function draw() {
        const canvas = document.getElementById("canvas");
        const ctx = canvas.getContext("2d");
      }
      draw();
    </script>
  </body>
</html>

Das Skript enthlt eine Funktion namens draw(), die ausgefhrt wird, sobald die Seite fertig geladen ist; dies geschieht, indem das Skript nach dem Hauptinhalt des Dokuments platziert wird. Diese Funktion, oder eine hnliche, knnte auch mit setTimeout(), setInterval() oder dem load-Event-Handler aufgerufen werden, solange die Seite zuerst geladen wurde.

An diesem Punkt sollte dieses Dokument leer gerendert werden.

Ein einfaches Beispiel

Um zu beginnen, schauen wir uns ein Beispiel an, das zwei sich berschneidende Rechtecke zeichnet, von denen eines Alpha-Transparenz hat. Wir werden spter in weiteren Beispielen genauer untersuchen, wie dies funktioniert. Aktualisieren Sie den Inhalt Ihres script-Elements wie folgt:

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

canvas {
  border: 1px solid black;
}

function draw() {
  const canvas = document.getElementById("my-canvas");
  const ctx = canvas.getContext("2d");

  ctx.fillStyle = "rgb(200 0 0)";
  ctx.fillRect(10, 10, 50, 50);

  ctx.fillStyle = "rgb(0 0 200 / 50%)";
  ctx.fillRect(30, 30, 50, 50);
}
draw();

Dieses Beispiel sieht so aus:

• Zurck
• Weiter