Baseline Widely available
Nutzen Sie das HTML-<canvas>-Element zusammen mit entweder der Canvas-Scripting-API oder der WebGL-API, um Grafiken und Animationen zu zeichnen.
Die Attribute dieses Elements umfassen die globalen Attribute.
height
Die Höhe des Koordinatenraums in CSS-Pixeln. StandardmäÃig 150.
moz-opaque Nicht standardisiert Veraltet
Gibt dem Canvas an, ob Transluzenz eine Rolle spielen wird. Wenn das Canvas weiÃ, dass keine Transluzenz vorhanden ist, kann die Malleistung optimiert werden. Dies wird nur von auf Mozilla basierenden Browsern unterstützt; verwenden Sie stattdessen die standardisierte Methode canvas.getContext('2d', { alpha: false }).
width
Die Breite des Koordinatenraums in CSS-Pixeln. StandardmäÃig 300.
Sie sollten alternativen Inhalt innerhalb des <canvas>-Blocks bereitstellen. Dieser Inhalt wird sowohl in älteren Browsern gerendert, die Canvas nicht unterstützen, als auch in Browsern mit deaktiviertem JavaScript.
</canvas>-Tag
Im Gegensatz zum <img>-Element erfordert das <canvas>-Element das schlieÃende Tag (</canvas>).
Die angezeigte GröÃe des Canvas kann mit CSS verändert werden, aber wenn Sie dies tun, wird das Bild beim Rendern skaliert, um zur gestylten GröÃe zu passen, was dazu führen kann, dass die endgültige Grafikwiedergabe verzerrt erscheint.
Es ist besser, die Dimensionen des Canvas festzulegen, indem Sie die Attribute width und height direkt an den <canvas>-Elementen festlegen, entweder direkt im HTML oder durch Verwendung von JavaScript.
Die genaue maximale GröÃe eines <canvas>-Elements hängt vom Browser und der Umgebung ab. Während in den meisten Fällen die maximalen Dimensionen 10.000 x 10.000 Pixel übersteigen, begrenzen insbesondere iOS-Geräte die Canvas-GröÃe auf nur 4.096 x 4.096 Pixel. Siehe GröÃenlimits für Canvas in verschiedenen Browsern und Geräten.
Hinweis: Das Ãberschreiten der maximalen Dimensionen oder Fläche macht das Canvas unbrauchbar â Zeichenbefehle funktionieren nicht.
Verwendung eines Offscreen-CanvasEin Canvas kann mithilfe der OffscreenCanvas-API gerendert werden, wobei das Dokument und das Canvas entkoppelt sind. Der Vorteil besteht darin, dass ein Worker-Thread das Canvas-Rendering übernehmen kann und der Haupt-Thread Ihrer Webanwendung nicht durch Canvas-Operationen blockiert wird. Durch Parallelisierung der Arbeit bleiben andere UI-Elemente Ihrer Webanwendung reaktionsfähig, selbst wenn Sie komplexe Grafiken auf einem Offscreen-Canvas ausführen. Für weitere Informationen siehe die Dokumentation zur OffscreenCanvas-API.
Das <canvas>-Element allein ist nur ein Bitmap und liefert keine Informationen über gezeichnete Objekte. Canvas-Inhalte werden nicht wie semantisches HTML an Barrierefreiheitswerkzeuge weitergegeben. Allgemein sollten Sie vermeiden, Canvas auf barrierefreien Websites oder Apps zu verwenden. Die folgenden Leitfäden können helfen, es barrierefreier zu gestalten.
Dieses Codebeispiel fügt Ihrem HTML-Dokument ein Canvas-Element hinzu. Ein Fallback-Text wird bereitgestellt, falls ein Browser das Canvas nicht lesen oder rendern kann.
<canvas width="120" height="120">
An alternative text describing what your canvas displays.
</canvas>
Rufen Sie dann im JavaScript-Code HTMLCanvasElement.getContext() auf, um einen Zeichenkontext zu erhalten und mit dem Zeichnen auf dem Canvas zu beginnen:
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
// Add a rectangle at (10, 10) with size 100x100 pixels
ctx.fillRect(10, 10, 100, 100);
<a>-Elemente, <button>-Elemente, <input>-Elemente, deren type-Attribut auf checkbox, radio oder button gesetzt ist. Tag-Auslassung Keine, sowohl das Start- als auch das End-Tag sind obligatorisch. Zulässige Eltern Jedes Element, das Phraseninhalte akzeptiert. Implizite ARIA-Rolle Keine entsprechende Rolle Zulässige ARIA-Rollen Beliebig DOM-Schnittstelle [`HTMLCanvasElement`](/de/docs/Web/API/HTMLCanvasElement) Spezifikationen Browser-Kompatibilität Siehe auch
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4