WebGL - Übersicht über HTML5 Canvas

Hallo, zukünftige Webgrafik-Zauberer! Heute werden wir eine aufregende Reise in die Welt von WebGL und HTML5 Canvas antreten. Als dein freundlicher Nachbarschafts-Computerlehrer bin ich begeistert, dich durch dieses Abenteuer zu führen. Keine Sorge, wenn du neu im Programmieren bist – wir beginnen bei den ganz Basics und arbeiten uns hoch. Also, nimm deine virtuelle Mal Pinsel und los geht's!

WebGL - Html5 Canvas Overview

HTML5 Canvas

Was ist HTML5 Canvas?

Stell dir vor, du hast eine magische digitale Leinwand, auf der du alles, was du willst, mit Code zeichnen kannst. Das ist im Grunde, was HTML5 Canvas ist! Es ist ein leistungsstarkes Element, das in HTML5 eingeführt wurde und es uns ermöglicht, Grafiken zu zeichnen, Animationen zu erstellen und sogar Spiele direkt in unseren Webbrowsern zu bauen.

Dein erstes Canvas erstellen

Lassen Sie mit einem einfachen HTML5 Canvas beginnen:

<!DOCTYPE html>
<html>
<head>
<titleMein erstes Canvas</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
</body>
</html>

In diesem Beispiel haben wir ein Canvas-Element mit einer ID von "myCanvas", einer Breite von 400 Pixeln und einer Höhe von 200 Pixeln erstellt. Es ist, als hättest du einen Staffelei mit einer leeren Leinwand aufgestellt – jetzt sind wir bereit zu malen!

Auf dem Canvas zeichnen

Nun, wo wir unser Canvas haben, lassen's uns etwas darauf zeichnen. Wir werden JavaScript dazu verwenden:

<!DOCTYPE html>
<html>
<head>
<title>Auf Canvas zeichnen</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

ctx.fillStyle = 'blau';
ctx.fillRect(10, 10, 100, 50);
</script>
</body>
</html>

Lassen wir das auseinanderbrechen:

Wir erhalten einen Verweis auf unser Canvas-Element mit getElementById.
Wir erhalten den 2D-Render-Kontext des Canvas mit getContext('2d').
Wir setzen die Füllfarbe auf blau mit fillStyle.
Schließlich zeichnen wir ein blaues Rechteck mit fillRect(x, y, breite, höhe).

Wenn du dies in deinem Browser öffnest, wirst du ein blaues Rechteck auf deiner Leinwand sehen. Gratulation! Du hast dein erstes digitales Gemälde erstellt!

Der Render-Kontext

Was ist ein Render-Kontext?

Stelle dir den Render-Kontext als dein Malkasten vor. Er bietet die Methoden und Eigenschaften, die es dir ermöglichen, auf dem Canvas zu zeichnen. In dem vorherigen Beispiel haben wir den 2D-Render-Kontext verwendet, aber es gibt auch andere Typen.

2D Render-Kontext

Der 2D-Render-Kontext ist am häufigsten verwendet und bietet eine breite Palette von 2D-Zeichenfunktionen. Hier ist eine Tabelle einiger nützlicher 2D-Kontextmethoden:

Methode	Beschreibung
fillRect(x, y, breite, höhe)	Zeichnet ein gefülltes Rechteck
strokeRect(x, y, breite, höhe)	Zeichnet den Umriss eines Rechtecks
fillText(text, x, y)	Zeichnet fylles Text auf dem Canvas
strokeText(text, x, y)	Zeichnet den Umriss des Texts auf dem Canvas
beginPath()	Startet einen neuen Pfad
moveTo(x, y)	Verschiebt den Pfad zu dem angegebenen Punkt
lineTo(x, y)	Zeichnet eine Linie zum angegebenen Punkt
arc(x, y, radius, startWinkel, endWinkel)	Zeichnet einen Bogen oder einen Kreis

Lassen's uns einige dieser Methoden verwenden, um eine komplexere Zeichnung zu erstellen:

<!DOCTYPE html>
<html>
<head>
<title>Komplexe Zeichnung</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="200"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');

// Ein Haus zeichnen
ctx.fillStyle = 'braun';
ctx.fillRect(100, 100, 150, 100);

// Ein Dach zeichnen
ctx.fillStyle = 'rot';
ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(175, 50);
ctx.lineTo(250, 100);
ctx.fill();

// Eine Tür zeichnen
ctx.fillStyle = 'gelb';
ctx.fillRect(160, 150, 30, 50);

// Text zeichnen
ctx.fillStyle = 'schwarz';
ctx.font = '20px Arial';
ctx.fillText('Mein Haus', 140, 190);
</script>
</body>
</html>

In diesem Beispiel haben wir ein einfaches Haus mit verschiedenen 2D-Kontextmethoden gezeichnet. Wir haben fillRect für das Haus und die Tür verwendet, beginPath, moveTo und lineTo für das Dach und fillText, um eine Beschriftung hinzuzufügen. Probiere verschiedene Koordinaten und Farben aus, um dein eigenes einzigartiges Haus zu erstellen!

WebGL Kontext

Einführung in WebGL

Nun tauchen wir in die aufregende Welt der 3D-Grafik mit WebGL ein. WebGL (Web Graphics Library) ist eine JavaScript-API zur Darstellung interaktiver 3D- und 2D-Grafiken in jedem kompatiblen Webbrowser, ohne dass Plugins erforderlich sind.

Den WebGL Kontext erhalten

Um WebGL zu verwenden, müssen wir den WebGL-Render-Kontext anstelle des 2D-Kontexts erhalten. So geht man vor:

<!DOCTYPE html>
<html>
<head>
<title>WebGL Kontext</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var gl = canvas.getContext('webgl');

if (!gl) {
console.log('WebGL wird nicht unterstützt, auf experimental-webgl zurückgreifen');
gl = canvas.getContext('experimental-webgl');
}

if (!gl) {
alert('Dein Browser unterstützt WebGL nicht');
}
</script>
</body>
</html>

In diesem Beispiel versuchen wir, den WebGL-Kontext zu erhalten. Wenn dies nicht unterstützt wird, greifen wir auf den experimental-webgl-Kontext zurück. Wenn auch das nicht verfügbar ist, warnen wir den Benutzer, dass sein Browser WebGL nicht unterstützt.

Ein einfaches WebGL Beispiel

Lassen's einen einfachen WebGL-Beispiel erstellen, der das Canvas mit einer Farbe löscht:

<!DOCTYPE html>
<html>
<head>
<title>Einfaches WebGL</title>
</head>
<body>
<canvas id="myCanvas" width="400" height="300"></canvas>
<script>
var canvas = document.getElementById('myCanvas');
var gl = canvas.getContext('webgl');

if (!gl) {
console.log('WebGL wird nicht unterstützt, auf experimental-webgl zurückgreifen');
gl = canvas.getContext('experimental-webgl');
}

if (!gl) {
alert('Dein Browser unterstützt WebGL nicht');
} else {
// Setze die Löschfarbe auf rot, vollständig deckend
gl.clearColor(1.0, 0.0, 0.0, 1.0);
// Lösche das Farbbuffer mit der angegebenen Löschfarbe
gl.clear(gl.COLOR_BUFFER_BIT);
}
</script>
</body>
</html>

In diesem Beispiel setzen wir die Löschfarbe auf rot mit gl.clearColor(rot, grün, blau, alpha), wobei jeder Wert zwischen 0.0 und 1.0 liegt. Dann löschen wir das Farbbuffer mit dieser Farbe mit gl.clear(gl.COLOR_BUFFER_BIT). Wenn du dies ausführst, solltest du ein rotes Canvas sehen.

Denke daran, dass WebGL viel komplexer als die 2D-Canvas-Rendern ist und Konzepte wie Shaders, Puffer und Matrizen umfasst. Aber keine Sorge! Wir werden diese in den nächsten Lektionen erkunden.

Schlussfolgerung

Gratulation! Du hast deine ersten Schritte in die Welt von HTML5 Canvas und WebGL gemacht. Wir haben die Grundlagen des Erstellens eines Canvas, des Zeichnens in 2D und haben sogar einen kleinen Einblick in die 3D-Welt von WebGL bekommen.

Denke daran, dass das Lernen von Grafikprogrammierung wie das Malen ist – es erfordert Übung und Geduld. Habe keine Angst, die Codebeispiele zu experimentieren, Werte zu ändern und zu sehen, was passiert. Je mehr du herumspielst, desto besser verstehst du, wie alles funktioniert.

In unserer nächsten Lektion tauchen wir tiefer in fortgeschrittene 2D-Canvas-Techniken ein und beginnen, die faszinierende Welt der WebGL-Shaders zu erkunden. Bis dahin, weiter codieren und viel Spaß beim Zeichnen!

Credits: Image by storyset