Join MDN and developers like you at Mozilla's View Source conference, 12-14 September in Berlin, Germany. Learn more at https://viewsourceconf.org

Canvas Tutorial

Dieser Artikel benötigt eine redaktionelle Überprüfung. So können Sie helfen.

Diese Übersetzung ist unvollständig. Bitte helfen Sie, diesen Artikel aus dem Englischen zu übersetzen.

<canvas> ist ein HTML Element, auf welches man mithilfe von Scripten (normalerweise JavaScript) Animationen, Grafiken oder Bilder projizieren kann. Die Bilder rechts zeigen Beispiele, welche man mit dem <canvas> Element erstellen kann.

Das <canvas>-Element wurde zuerst von Apple für das Mac OS X Dashboard vorgestellt und später in Safari und Google Chrome implementiert. Gecko 1.8-basierte Browser wie Firefox 1.5 und jünger unterstützen ebenfalls dieses Element. Das <canvas>-Element ist Teil der WhatWG Web applications 1.0 Spezifikation (HTML5).

Dieses Tutorial beschreibt die Grundlagen des Zeichnens von 2d-Grafiken mit dem <canvas>-Element. Die Beispiele sollen die Möglichkeiten des Canvas aufzeigen. Der zugehörige Code dient als Einführung und kann als Vorlage für eigenen Content dienen.

Vorbereitung

Das <canvas> Element sinnvoll zu nutzen ist nicht schwierig, aber man benötigt einfaches Verständnis von HTML und JavaScript. Das <canvas> Element wird in einigen älteren Browsern nicht unterstützt. Die Standardgröße des Canvas beträgt 300px x 150px (Breite x Höhe). Selbstverständlich können diese über die Attribute height und width oder via CSS geändert werden. Um auf dem <canvas> Element zu zeichnen wird meist die JavaScript Canvas API "on the fly" genutzt.

In diesem Tutorial

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

 Mitwirkende an dieser Seite: GeorgKern, Leun4m, medium-endian, manni66, pixunil
 Zuletzt aktualisiert von: GeorgKern,