Grundlegende Nutzung von Canvas

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

Auf den ersten Blick sieht ein <canvas> wie das <img>-Element aus, mit dem einzigen klaren Unterschied, dass es die Attribute src und alt nicht hat. Tatsächlich hat das <canvas>-Element nur zwei Attribute, width und height. Diese sind beide optional und können auch über DOM-Eigenschaften gesetzt werden. Wenn keine width- und height-Attribute angegeben sind, ist der Canvas zunächst 300 Pixel breit und 150 Pixel hoch. Das Element kann mittels CSS beliebig dimensioniert werden, aber während des Renderings wird das Bild so skaliert, dass es in seine Layoutgröße passt: Wenn die CSS-Dimensionierung nicht das Verhältnis des ursprünglichen Canvas respektiert, erscheint es verzerrt.

Das id-Attribut ist nicht spezifisch für das <canvas>-Element, sondern eines der globalen HTML-Attribute, das auf jedes HTML-Element angewendet werden kann (wie zum Beispiel class). Es ist immer eine gute Idee, eine id zu vergeben, da dies die Identifizierung in einem Skript wesentlich erleichtert.

Das <canvas>-Element kann wie jedes normale Bild gestylt werden (margin, border, background…). Diese Regeln beeinflussen jedoch nicht die tatsächliche Zeichnung im Canvas. Wie dies geschieht, werden wir in einem eigenen Kapitel dieses Tutorials sehen. Wenn keine Stilregeln auf das Canvas angewendet werden, ist es anfänglich vollständig transparent.

Das <canvas>-Element muss, wie die Elemente <img>, <video>, <audio> und <picture>, zugänglich gemacht werden, indem ein Fallback-Text bereitgestellt wird, der angezeigt wird, wenn die Medien nicht geladen werden oder der Benutzer sie nicht wie vorgesehen erleben kann. Sie sollten stets Fallback-Inhalte, Untertitel und alternativen Text bereitstellen, passend zum Medientyp.

Fallback-Inhalte bereitzustellen ist sehr einfach: Fügen Sie einfach den alternativen Inhalt innerhalb des <canvas>-Elements ein, damit Screenreader, Spider und andere automatische Bots darauf zugreifen können. Browser ignorieren standardmäßig den Inhalt innerhalb des Containers und rendern das Canvas normal, es sei denn, <canvas> wird nicht unterstützt.

Zum Beispiel könnten wir eine Textbeschreibung des Canvas-Inhalts bereitstellen oder ein statisches Bild des dynamisch gerenderten Inhalts anzeigen. Das könnte 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>

Dem Benutzer zu sagen, einen anderen Browser zu verwenden, der Canvas unterstützt, hilft nicht den Benutzern, die das Canvas überhaupt nicht lesen können. Nützlichen Fallback-Text oder ein untergeordnetes DOM bereitzustellen, trägt zur Zugänglichkeit eines ansonsten nicht zugänglichen Elements bei.

Als Konsequenz der Art und Weise, wie Fallback bereitgestellt wird, benötigt das <canvas>-Element erforderlich das schließende Tag (</canvas>), im Gegensatz zum <img>-Element. Wenn dieses Tag nicht vorhanden ist, würde der Rest des Dokuments als Fallback-Inhalt betrachtet und nicht angezeigt werden.

Wenn kein Fallback-Inhalt benötigt wird, ist ein einfaches <canvas id="foo" role="presentation" …></canvas> vollständig kompatibel mit allen Browsern, die überhaupt Canvas unterstützen. Dies sollte nur verwendet werden, wenn das Canvas rein präsentational ist.

Das <canvas>-Element erstellt eine feststehende Zeichenfläche, die einen oder mehrere Rendering-Kontexte bereitstellt, die zum Erstellen und Manipulieren des angezeigten Inhalts verwendet werden. In diesem Tutorial konzentrieren wir uns auf den 2D-Rendering-Kontext. Andere Kontexte können unterschiedliche Arten der Renderings bereitstellen; zum Beispiel verwendet WebGL einen 3D-Kontext basierend auf OpenGL ES.

Das Canvas ist anfänglich 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. Für 2D-Grafiken, wie sie in diesem Tutorial behandelt werden, geben Sie "2d" an, um einen CanvasRenderingContext2D zu erhalten.

const canvas = document.getElementById("tutorial");
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, können Sie mit der getContext()-Methode auf den Zeichenkontext zugreifen.

Der Fallback-Inhalt wird in Browsern angezeigt, die <canvas> nicht unterstützen. Skripte können auch programmgesteuert auf Unterstützung prüfen, indem sie das Vorhandensein der getContext()-Methode testen. Unser obiger Codeausschnitt sieht dann so aus:

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

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

Hier ist eine minimalistische Vorlage, die wir als Ausgangspunkt für spätere 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="tutorial" width="150" height="150"></canvas>
    <script>
      function draw() {
        const canvas = document.getElementById("tutorial");
        if (canvas.getContext) {
          const ctx = canvas.getContext("2d");
        }
      }
      window.addEventListener("load", draw);
    </script>
  </body>
</html>

Das Skript enthält eine Funktion namens draw(), die ausgeführt wird, sobald die Seite fertig geladen ist; dies wird durch das Anhören des load-Ereignisses am Dokument erreicht. Diese Funktion, oder eine ähnliche, könnte auch mit setTimeout(), setInterval() oder einem anderen Ereignishandler aufgerufen werden, solange die Seite zuerst geladen wurde.

So würde eine Vorlage in Aktion aussehen. Wie hier gezeigt, ist sie anfänglich leer.

Um zu beginnen, schauen wir uns ein Beispiel an, das zwei sich überschneidende Rechtecke zeichnet, von denen eines eine Alpha-Transparenz hat. Wir werden in späteren Beispielen genauer untersuchen, wie dies funktioniert.

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <title>Canvas experiment</title>
  </head>
  <body>
    <canvas id="canvas" width="150" height="150"></canvas>
    <script>
      function draw() {
        const canvas = document.getElementById("canvas");
        if (canvas.getContext) {
          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();
    </script>
  </body>
</html>

Dieses Beispiel sieht folgendermaßen aus:

• Zurück
• Weiter