HTML Canvas Grafiken

HTML Canvas wird zum softwaregesteuerten Zeichnen von Grafiken auf Webseiten eingesetzt.  Das Element <canvas> mit weiteren Parametern zeichnet grafische Figuren, Texte, Hintergründe und kann Bilder hinzufügen. Canvas ist ein Container für Grafiken und Javascript wird zum Zeichnen der Grafiken genutzt.

Welche Browser unterstützen HTML Canvas?

Die volle Unterstützung von Canvas beherrschen die Browser ab der genannten Version und jede neuere Version.

  • Firefox ab Version 2.0
  • Apple Safari ab Version 3.1
  • Chrome ab Version 4.0
  • Opera ab Version 9.0

Ein Code Beispiel

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>HTML Canvas</title>
</head>
<body>

<!-- Rechteck zeichnen mit Canvas-->
<canvas id="meinCanvas" width="300" height="200" style="border:4px solid #0000cc;">
</canvas>

<!-- Fülling erstellen mit Javascript -->
<script>
var c = document.getElementById("meinCanvas");
var ctx = c.getContext("2d");
// Create gradient
var grd = ctx.createLinearGradient(0,0,260,0);
grd.addColorStop(0,"blue");
grd.addColorStop(1,"gold");
// Fill with gradient
ctx.fillStyle = grd;
ctx.fillRect(10,10,280,180);
</script>
</body>
</html>

Fazit

HTML Canvas ist eine praktische Erweiterung, wenn es darum geht maschinell Grafiken zu erstellen. Bei der Digitalisierung und Industrie 4.0 werden Funktionen wie diese die Kommunikation zwischen Mensch und KI erleichtern.

HTML5 – Neues Element <embed>

Der <embed> Tag von HTML5 ist vielfältig nutzbar.  Mit Hilfe des Tags werden multimediale Inhalte, Plugins eingebunden. Das bietet die Möglichkeit Flash, Videos und andere multimediale Inhalte in der Webseite zu präsentieren. Über Attribute wird die Breite und die Höhe der genutzten Inhalte festgelegt.

Es können vier Attribute genutzt werden:

  • height = Die Höhe des genutzten Bereichs wird in Pixel angegeben.
  • width = Die Breite des Bereichs in Pixel angeben.
  • src = Den Pfad und Dateiname des eingebundenen Elements eintragen.
  • type = Die Art des genutzten Inhalts bestimmen.

Zudem können

  • die Universalattribute class, contenteditable, contextmenu, dir, draggable, id, irrelevant, lang, ref, registrationmark, tabindex, template, title
  • die Eventattribute onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup, onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout, onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload

verwendet werden.

In den Quellcode Beispiel wird eine lokale Flash Datei in die Webseite eingebunden. Die Breite und Höhe werden durch die Flash Datei gesetzt.

Quellcode Beispiel:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Den Tag embed nutzen</title>
  </head>
  <body>
    <h1>Video aus dem Artikel Gimp Bildverbesserung</h1>
    <p>Es wird ein Flash Video eingebunden.</p>

       <embed src="http://www.html-lernen.de/wp-content/uploads/2009/12/Gimp_verbesserung.flv" />

</body>
</html>

Der Tag wird nur verarbeitet, wenn der Browser des Nutzers dies unterstützt!

HTML5 – Neues Element <canvas>

Der Tag <canvas> ist neu und fügt mit Javascript oder Scriptsprachen erstellte Grafiken ein. Dies können zum Beispiel Statistiken, Werbung oder weitere Elemente dargestellt werden. Das ist ein Tag mit viel Potential!

Es gibt zwei Attribute:

  • width = Bei width wird die Breite der grafisch genutzten Fläche in Pixel angegeben werden.
  • height = Hier wird die Höhe der grafisch genutzten Fläche in Pixel angegeben.

Zusätzlich können

  • die Universalattribute class, contenteditable, contextmenu, dir, draggable, id, irrelevant, lang, ref, registrationmark, tabindex, template, title
  • die Eventattribute onabort, onbeforeunload, onblur, onchange, onclick, oncontextmenu, ondblclick, ondrag, ondragend, ondragenter, ondragleave, ondragover, ondragstart, ondrop, onerror, onfocus, onkeydown, onkeypress, onkeyup, onload, onmessage, onmousedown, onmousemove, onmouseover, onmouseout, onmouseup, onmousewheel, onresize, onscroll, onselect, onsubmit, onunload

verwendet werden.

Quellcode Beispiel:

<!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Den Tag canvas einsetzen</title>
  </head>
  <body>
    <h1>Meine Webseite</h1>
    <p>Das ist der Text in meiner Webseite. Nun wird ein berechnetes
Quadrat eingebunden.</p>

       <canvas id="quadrat></canvas>

       <!-- Berechnung der Grafik -->
       <script type="text/javascript">
         var ctx=canvas.getContext('2d');
         var canvas=document.getElementById('quadrat');
         ctx.fillStyle='#6666ff';
         ctx.fillRect(10,10,120,120);
       </script>
</body>
</html>

Der Tag wird nur verarbeitet, wenn der Browser des Nutzers dies unterstützt!