Das Tag <canvas> (aus eng. - Canvas) erstellt ein Teil der Webseite, wo man verschiedene Objekte, Fotos, Animationen, Fotokompositionen durch Javascript erstellen kann. Das Tag ist in fünfter Version von HTML erschienen.
Bei der Arbeit mit canvas ist es wichtig, solche Begriffe, wie das Element canvas und den Kontext des Elementes zu unterscheiden, da sie ziemlich oft verwirrend sind. Das Element canvas ist in HTML (der Knoten DOM) eingebaut. Der Kontext canvas ist ein Objekt mit eigener Methode und den Eigenschaften für die Visualisierung. Der Kontext kann 2D und 3D sein. Das Element canvas kann nur einen Kontext haben.
Syntax
Das Tag <canvas> wird gepaart verwendet, sein Inhalt wird zwischen den Start- (<canvas>) und Endtags (</canvas>) geschrieben.
Beispiel
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
</head>
<body>
<canvas id="myCanvas">Ihr Browser unterstützt das HTML5-Element canvas nicht.</canvas>
<script>
var c=document.getElementById('myCanvas');
var ctx=c.getContext('2d');
ctx.fillStyle='#ff9311';
ctx.fillRect(10,50,80,80);
</script>
</body>
</html>Ergebnis
Beispiel
<!DOCTYPE HTML>
<html>
<head>
<title>Der Titel des Dokuments</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var context = canvas.getContext('2d');
context.font = '30pt Calibri';
context.fillStyle = '#1c87c9';
context.fillText('Canvas Beispiel !', 50, 100);
</script>
</body>
</html>Ergebnis
Attribute
| Attribut | Wert | Beschreibung |
|---|---|---|
| height | pixels | Es bestimmt die Höhe des Elements in Pixel. Voreingestellter Wert ist "150". |
| width | pixels | Es bestimmt die Breite des Elements in Pixel. Voreingestellter Wert ist "300". |
Das Tag <canvas> unterschtützt Globale Attribute und Globale Eventhandler.
Browser-Support
|
|
|
|
|---|---|---|---|
| 4+ | 2+ | 3.1+ | 9+ |
Übe dein Wissen
