Sitzungsaufgaben I – Feature Detection mit Modernizr und Zeichnen mit canvas

Aufgabe 1

Laden Sie bitte die JavaScript-Bibliothek Modernizr von der Seite http://modernizr.com herunter und legen Sie die Datei in dem Ordner js ab. Verwenden Sie die Produktivversion (Production) mit allen Unterelementen von CSS3, HTML5 und Misc.

Aufgabe 2

Erstellen Sie ein neues HTML5-Dokument und binden Sie Modernizr im Kopfbereich Ihres HTML-Dokumentes ein. Fügen Sie anschließend die folgenden JavaScript-Anweisungen in den Inhaltsbereich des Dokumentes ein und rufen Sie Ihre neu erstellte Webseite im Browser auf.

if (Modernizr.geolocation) {
	document.write("Ihr Browser unterstützt Geolokalisierung.");
} else {
	document.write("Geolokalisierung wird von Ihrem Browser nicht unterstützt.");
}

Aufgabe 3

Prüfen Sie mit Modernizr, ob Ihr Browser die nachfolgende HTML5-Funktionalität bietet. Tipp: Ein Überblick über abfragbare HTML5-Funktionalität bietet http://modernizr.com/docs/#features-html5.

  • Drag and Drop
  • Scalable Vector Graphics (SVG)
  • WebGL
  • HTML5 Video
  • HTML5 Audio (ogg, mp3, m4a)

Aufgabe 4

Laden Sie jQuery herunter und binden Sie die Bibliothek ein.

Aufgabe 5

Fügen Sie das folgende HTML-Markup zu Beginn des Inhaltsbereiches Ihres HTML-Dokumentes ein (d.h. oberhalb des Script-Tags, das Sie zuerst erstellt haben, um mit Modernizr die Fähigkeiten Ihres Browsers zu prüfen):

<div id="leinwand">
	<canvas height="300" id="zeichenbereich" width="300"></canvas>
</div>

Aufgabe 6

Prüfen Sie mit Modernizr, ob Ihr Browser das HTML-Element canvas unterstützt. Wenn ja, lassen Sie die folgenden JavaScript-Anweisungen ausführen:

var demospace = document.getElementById("zeichenbereich");
var context = demospace.getContext("2d");
	
context.font = "23px Arial";
context.fillText("Ich bin eine wunderschön anzuschauende horizontale Linie", 10, 30);

Wird canvas nicht unterstützt, wird der Div-Container mit der ID „leinwand“ unter Verwendung von jQuery versteckt.

Aufgabe 7

Zeichnen Sie die folgenden Formen:

canvas-formen

Tipp: Anschaulich aufgelistet und erklärt finden sich die unterschiedlichen Zeichenfunktionen auf den Seiten der W3Schools unter http://www.w3schools.com/html/html5_canvas.asp.

Aufgabe 8

Zeichnen Sie das Peace-Zeichen:

peace

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.