X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

HTML-Tag <canvas>

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+


Finden Sie das nützlich?

Ähnliche Artikel