| Weitere Artikel aus dem Webentwickler Blog |
| Teilen |  |
 |
 |
HTML - Praxiswissen Teil 3 - Grafiken
HTML5 Praxiswissen - Generierte Vektorgrafik mit dem canvas-Element
Das mit HTML5 neu eingeführte canvas-Element ist neben SVG die andere Möglichkeit, um Vektorgrafik in HTML einzubinden. Das canvas-Element ist dabei allerdings nur ein Behälter, eine Aktionsfläche mit definierten Ausmaßen. Was innerhalb davon geschieht, wird durch Scripting, also durch Programmierung erreicht. Bislang gab es jedoch in ECMA/JavaScript keine geeigneten Objekte für Vektorgrafik. Deshalb hat der HTML5-Standard gleich ein solches Objekt mit definiert: den CanvasRendering- Context2D.
Das bedeutet aber auch: Das canvas-Element ist nicht automatisch ein Container für dieses Objekt, und seine Fähigkeiten sind nicht auf die Möglichkeiten dieses Objekts beschränkt. Das CanvasRenderingContext2D-Objekt ist nur eine zunächst mal mit aufden Weg gegebene Anwendungsmöglichkeit für canvas.
Hinweise zu CanvasRenderingContext2D
Dieser Abschnitt soll Sie auch ohne große Programmierkenntnisse dazu befähigen, einfache Vektorgrafiken mit JavaScript und CanvasRenderingContext2D zu erzeugen. Dabei wird nicht der gesamte Funktionsumfang des CanvasRenderingContext-2D-Objekts berücksichtigt. In der HTML-Canvas-Referenz werden alle Eigenschaften und Methoden des CanvasRenderingContext2D-Objekts aufgelistet.
Canvas mit 2D-Rendering-Context
Sie können einen Canvas-Bereich für eine Vektorgrafik definieren. In einem Script-Bereich stellen Sie dann einen Bezug zu dem canvas-Element her, indem Sie ein CanvasRenderingContext2D-Objekt erzeugen. Wurde das Objekt erfolgreich erzeugt, können Sie Methoden (Funktionen) dieses Objekts aufrufen, um vektorgrafische Inhalte zu erzeugen.
Beispiel
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Information</title>
</head>
<body>
<canvas id="info" width="400" height="600">
<img src="info.png" alt="Information">
</canvas>
<script>
var infoPic = document.getElementById('info');
if (infoPic.getContext) {
infoPic = infoPic.getContext('2d');
infoPic.fillStyle = "#AAAAAA";
infoPic.fillRect(0, 0, 140, 360);
infoPic.fillStyle = "#FF8800";
infoPic.fillRect(20, 130, 100, 200);
infoPic.fillStyle = "#880088";
infoPic.beginPath();
infoPic.arc(70, 70, 50, 0, 2 * Math.PI, true);
infoPic.fill();
infoPic.fillStyle = "#880088";
infoPic.font = "bold 14px Arial,sans-serif";
infoPic.fillText ("NFORMATION", 22, 325);
}
</script>
</body>
</html>
Erläuterung
Das Beispiel erzeugt zum besseren Vergleich die gleiche Grafik wie in Teil 1 von HTML5-Praxiswissen - SVG-Grafiken direkt einbinden. In diesem Fall wird jedoch anstelle von SVG das canvas-Element verwendet. Das canvas-Element wird an der Stelle im HTML-Code notiert, an der die Grafik erscheinen soll.
Grafik erzeugt mit CanvasRenderingContext2D-Objekt
Das Element erhält im einleitenden <canvas>-Tag die Attribute id, width und height. Mit id vergeben Sie einen dokumentweit eindeutigen Namen für das Element. Über diesen Namen können Sie in JavaScript auf das Element zugreifen. Im obigen Beispiel erhält das Element den id-Namen info. Mit dem width-Attribut bestimmen Sie die Anzeigebreite des canvas-Elements in Pixeln und mit height die Höhe, ebenfalls in Pixeln.
Ganzen Artikel lesen...
Stefan Münz, Clemens Gull
Lernen Sie die ganze Vielfalt vom Franzis Buch- und Softwareverlag kennen
