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.