Einstieg in Canvas
Februar 2023
Ein HTML-Dokument mit canvas-Element
Wir erstellen wir eine einfache HTML-Seite
die wir als Datei speichern.
Das ist unser Ausgangspunkt für die folgenden Beispiele.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Canvas-Experimente</title>
<style>
/* hier haben CSS-Styles Platz */
canvas { border: 1pt solid red; }
</style>
<script>
'use strict';
document.onreadystatechange = function () {
if (document.readyState == "complete") {
// hier kommen unsere JavaScript-Anweisungen hin
}
}
</script>
</head>
<body>
<!-- HTML-Code -->
<h3>Canvas</h3>
<canvas id="leinwand" width="200" height="200"></canvas>
</body>
Im Browser geöffnet sehen wir die Überschrift und entsprechend dem Styling
die Canvas als leeres Quadrat, rot umrandet.
Erklärungen zum Dokument
HTML
Der Browser verwendet das Element
canvas als Zeichenfläche.
Über die Attribute width und height bestimmen wir die Abmessungen der Grafik in darzustellenden Pixeln.
<canvas id="leinwand" width="200" height="120">
<div>
Dieser Inhalt wird nur dann angezeigt,
wenn der Browser canvas nicht unterstützt.
</div>
</canvas>
Die Fläche wird jetzt bereits vom Browser freigehalten.
CSS
Mit CSS kann das Element
canvas gestylt werden, womit in unseren
Beispielen wegen der besseren Sichtbarkeit ein roter Rahmen eingestellt
sowie ein weißer Hintergrund gesetzt wird.
<style>
#leinwand {
border: 1pt solid red;
background-color: #fff;
}
</style>
Die Fläche beinhaltet bereits jetzt eine leere Grafik. Versucht man, diese
über die rechte Maustaste zu speichern, dann erhält man eine Bilddatei
im PNG-Format.Die Vorbereitungen wären damit abgeschlossen,
das eigentliche Erstellen der Grafik geschieht mithilfe von JavaScript.
JavaScript
Zunächst greifen wir mit
getElementById auf das Canvas-Element zu
und erhalten ein recht komplexes Objekt, im Beispiel in der Variablen myCanvas.
Das Element enthält die Methode getContext(), von der wir
einen sogenannten Zeichenkontext erhalten. Im Beispiel ist es die Variable
Ctx2d.
// zuerst das canvas-Element finden
let myCanvas = document.getElementById('leinwand');
// gibt es die Methode dann existiert die Canvas
if(myCanvas.getContext)
{
// Jetzt Zeichenkontext holen
let Ctx2d = myCanvas.getContext('2d');
// ... hier folgt die eigentliche Grafik-Programmierung ...
}
Das Argument
'2d' bei getContext()
bewirkt, dass ein CanvasRenderingContext2D-Objekt
zurückgegeben wird; eine API, mit dem 2D-Grafiken erstellt werden können.
Dieser Zeichenkontext wird von den meisten Browsern unterstützt und
genau damit befassen wir uns in diesem Beitrag.