Element-Referenz
HTML 5 doctype - weil html einfach einfach ist.
nach oben

<canvas>NEU

Ihr Browser unterstützt das Element canvas nicht.

Das HTML5 Element <canvas> erlaubt zweidimensionales Zeichnen mit Linien, Füllungen, Bildern, Texten und weiteren grafischen Elementen, innerhalb des mit Höhen- und Breiten-Attributen definierten Bereichs des <canvas> Elements. Ähnlich wie in einem Bildbearbeitungsprogramm können Kreisbögen, Bézierkurven, Farbverläufe, Transparenz und externe Grafiken erstellt bzw. eingebaut werden. Der eigentliche Code wird mit Hilfe von Scripting-Sprachen wie beispielsweise Javascript erstellt, die entsprechenden Methoden ermöglichen die dynamische Erzeugung von Grafiken und Animationen.

Beispiel:

<canvas id="canvas_id" width="150" height="150">
<p>Ihr Browser unterstützt das Element canvas nicht.</p>
</canvas>
<script type="text/javascript" src="canvas_id.js"></script>

Beispiel Script:

function drawIt(){
var objCanvas = document.getElementById('canvas_id');// Falls das Objekt unterstützt wird
if(objCanvas.getContext){
// Kontext
var objContext = objCanvas.getContext('2d');// strokeStyle - bestimmt die Farbe oder den Stil, beim Zeichnen einer Kontur um eine Form
objContext.strokeStyle = "#3B4998";
// strokeRect - Zeichnet die Umfanglinien eines Rechtecks
objContext.strokeRect(0, 0, 150, 150);// fillStyle - bestimmt die Farbe oder den Stil, zum Füllen einer Form
objContext.fillStyle = "#3B4998";
// fillRect - Füllt den Inhalt eines Rechtecks
objContext.fillRect(15, 15, 120, 120);// Falls es kein IE ist
if(!(/MSIE/.test(navigator.userAgent) && !window.opera))
// clearRect - Löscht den Inhalt eines Rechtecks
objContext.clearRect(35, 35, 35, 35);// strokeStyle - bestimmt die Farbe oder den Stil, beim Zeichnen einer Kontur um eine Form
objContext.strokeStyle = "#f00";
// strokeRect - Zeichnet die Umfanglinien eines Rechtecks
objContext.strokeRect(75, 75, 40, 40);// Zeichenroutinen
//document.getElementsByTagName("body")[0].appendChild(objCanvas);}else{
// Sonstiger Code
}
}
window.onload = function(){ drawIt();}

Beispiel Anwendung:

Ihr Browser unterstützt das Element canvas nicht.



Notation

<canvas [Attribute]>[Elementinhalt]</canvas>

Elternelemente

Kann gemäß der HTML5 Spezifikation innerhalb der folgenden Elemente vorkommen:

Liste der HTML 5 Block-ElementeBlock-Elemente und Liste der HTML 5 Inline-ElementeInline-Elemente - ausgenommen zum <audio> Element<audio>, zum <canvas> Element<canvas>, zum <img> Element<img> und zum <video> Element<video>.


Elementinhalt

Kann Text mit folgenden anderen HTML-Elementen enthalten:
Liste der HTML 5 Inline-ElementeInline-Elemente.


Attribute

Kann folgende elementspezifische Attribute enthalten:
zum HTML5 Attribut heightheight | zum HTML5 Attribut widthwidth

Des Weiteren kann das Element folgende allgemeinen Attribute und Event-Handler enthalten:
zum HTML5 Attribut accesskeyaccesskey | zum HTML5 Attribut classclass | zum HTML5 Attribut contenteditablecontenteditable | zum HTML5 Attribut contextmenucontextmenu | zum HTML5 Attribut datadata | zum HTML5 Attribut dirdir | zum HTML5 Attribut draggabledraggable | zum HTML5 Attribut hiddenhidden | zum HTML5 Attribut idid | zum HTML5 Attribut itemitem | zum HTML5 Attribut itempropitemprop | zum HTML5 Attribut langlang | zum HTML5 Attribut spellcheckspellcheck | zum HTML5 Attribut stylestyle | zum HTML5 Attribut subjectsubject | zum HTML5 Attribut tabindextabindex | zum HTML5 Attribut titletitle

onabort | onblur | onchange | onclick | oncontextmenu | ondblclick | ondrag | ondragend | ondragenter | ondragleave | ondragover | ondragstart | ondrop | onfocus | onformchange | onforminput | oninput | onkeydown | onkeypress | onkeyup | onmousedown | onmousemove | onmouseout | onmouseover | onmouseup | onmousewheel | onscroll | onselect | onsubmit


W3C Logo Spezifikation

Der Artikel zum HTML5-Element <canvas> wurde am veröffentlicht. Die letzte Aktualisierung erfolgte am .

Tastaturkürzel