• Zurück
• Weiter

Beginnen wir dieses Tutorial, indem wir uns das<canvas>-HTML-Element selbst ansehen. Am Ende dieser Seite werden Sie wissen, wie Sie einen Canvas-2D-Kontext einrichten und ein erstes Beispiel in Ihrem Browser gezeichnet haben.

Das<canvas>-Element

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

Auf den ersten Blick sieht ein<canvas>-Element aus wie das<img>-Element, mit dem einzigen klaren Unterschied, dass es nicht diesrc undalt Attribute besitzt. Tatsächlich hat das<canvas>-Element nur zwei Attribute,width undheight. Diese sind beide optional und können auch mithilfe vonDOM-Eigenschaften eingestellt werden. Wenn keinewidth- undheight-Attribute angegeben sind, wird das Canvas zunächst300 Pixel breit und150 Pixel hoch sein. Das Element kann beliebig perCSS skaliert werden, aber während der Darstellung wird das Bild so skaliert, dass es die Layoutgröße passt: Wenn die CSS-Größenanpassung das Verhältnis des ursprünglichen Canvas nicht respektiert, erscheint es verzerrt.

Dasid-Attribut ist nicht spezifisch für das<canvas>-Element, sondern gehört zu denglobalen HTML-Attributen, die auf jedes HTML-Element angewendet werden können (wie z.B.class). Es ist immer eine gute Idee, eineid anzugeben, da dies die Identifizierung in einem Skript erheblich erleichtert.

Das<canvas>-Element kann wie jedes normale Bild gestylt werden (margin,border,background...). Diese Regeln beeinflussen jedoch nicht die tatsächliche Zeichnung auf dem Canvas. Wie das gemacht wird, sehen wir in einemdedizierten Kapitel dieses Tutorials. Wenn keine Styling-Regeln auf das Canvas angewendet werden, ist es zunächst vollständig transparent.

Zugänglicher Inhalt

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

Fallback-Inhalte bereitzustellen, ist sehr einfach: Fügen Sie einfach den alternativen Inhalt innerhalb des<canvas>-Elements ein, damit er von Screenreadern, Suchmaschinen und anderen automatisierten Bots abgerufen werden kann. 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 bereitstellen. Dies könnte so aussehen:

<canvas width="150" height="150">  current stock price: $3.15 + 0.15</canvas><canvas width="150" height="150">  <img src="images/clock.png" width="150" height="150" alt="A clock" /></canvas>

Den User anzuweisen, einen anderen Browser zu verwenden, der Canvas unterstützt, hilft denjenigen nicht, die das Canvas überhaupt nicht lesen können. Nützlicher Fallback-Text oder ein untergeordnetes DOM-Element erhöht die Zugänglichkeit eines sonst nicht zugänglichen Elements.

Erforderlicher</canvas>-Tag

Als Folge der Art und Weise, wie Fallback bereitgestellt wird, benötigt das<canvas>-Elementim Gegensatz zum<img>-Element das abschließende Tag (</canvas>). 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 role="presentation" …></canvas> vollständig kompatibel mit allen Browsern, die Canvas überhaupt unterstützen. Dies sollte nur verwendet werden, wenn das Canvas rein dekorativ ist.

Der Rendering-Kontext

Das<canvas>-Element erstellt eine festgelegte Zeichenfläche, die einen oder mehrereRendering-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 können unterschiedliche Arten von Rendering bereitstellen; zum Beispiel verwendetWebGL einen 3D-Kontext, der aufOpenGL ES basiert.

Das Canvas ist zunächst leer. Um etwas anzuzeigen, muss ein Skript zuerst den Rendering-Kontext abrufen und darauf zeichnen. Das<canvas>-Element verfügt über eine Methode namensgetContext(), 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 einCanvasRenderingContext2D 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 Methodedocument.getElementById() aufgerufen wird. Sobald Sie den Elementknoten haben, können Sie den Zeichenkontext mit seinergetContext()-Methode abrufen.

Unterstützung prüfen

Der Fallback-Inhalt wird in Browsern angezeigt, die<canvas> nicht unterstützen. Skripte können auch programmatisch die Unterstützung prüfen, indem sie auf das Vorhandensein dergetContext()-Methode testen. Unser oben stehender Code-Snippet wird zu etwas wie diesem:

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 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 width="150" height="150"></canvas>    <script>      function draw() {        const canvas = document.getElementById("canvas");        const ctx = canvas.getContext("2d");      }      draw();    </script>  </body></html>

Das Skript enthält eine Funktion namensdraw(), die ausgeführt wird, sobald die Seite fertig geladen ist; dies geschieht, indem das Skript nach dem Hauptinhalt des Dokuments platziert wird. Diese Funktion oder eine ähnliche könnte auch mithilfe vonsetTimeout(),setInterval() oder demload-Ereignis-Handler aufgerufen werden, solange die Seite zuerst geladen wurde.

An diesem Punkt sollte dieses Dokument leer angezeigt werden.

Ein einfaches Beispiel

Um zu beginnen, schauen wir uns ein Beispiel an, das zwei sich überschneidende Rechtecke zeichnet, von denen eines eine Alphatransparenz hat. Wir werden später detaillierter darauf eingehen, wie dies funktioniert. Aktualisieren Sie den Inhalt Ihresscript-Elements zu diesem:

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

canvas {  border: 1px solid black;}

function draw() {  const canvas = document.getElementById("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 folgendermaßen aus:

• Zurück
• Weiter