MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

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

<canvas> ist ein HTML Element, auf das man mit Hilfe von Skripten (normalerweise JavaScript) Animationen, Grafiken oder Bilder projiziert. Die Bilder rechts zeigen Beispiele, die sich mit dem <canvas>-Element erstellen lassen.

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 dieses Element ebenfalls. 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, setzt aber ein einfaches Verständnis von HTML und JavaScript voraus. Einige ältere Browser unterstützen das <canvas>-Element nicht. Die Standardgröße des Canvas beträgt 300 x 150 Pixel (Breite x Höhe). Selbstverständlich lassen diese sich über die Attribute height und width oder mit Hilfe von CSS ändern. Um auf dem <canvas>-Element zu zeichnen, nutzen Entwickler meist die JavaScript-Canvas-API "on the fly".

In diesem Tutorial

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

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