Anzeige
Tutorialbeschreibung

Web-Apps erstellen (Teil 17): Zeichnen mit canvas (1)

Web-Apps erstellen (Teil 17): Zeichnen mit canvas (1)

Mit HTML5 wurde das canvas-Element eingeführt, das sicherlich eine der spektakulärsten Neuerungen darstellt. Denn eben jenes canvas ermöglicht das dynamische Zeichnen von 2D-Formen und Bitmap-Bildern direkt im Browser. In diesem Video-Training werden grundlegende Dinge zum canvas-Element beschrieben. Warum das Ganze? Dank canvas könnt ihr eure App um eine Zeichenfunktion erweitern. Eine typische Anwendung dafür könnte beispielsweise eine Mal-App sein. Zunächst muss man allerdings wissen, wie canvas funktioniert. Genau hier setzt dieses Video-Training an.

... übrigens findest du die komplette Serie hier: Web-Apps programmieren - das Training - Schnapp sie dir in unserem Shop oder in der Kreativ-Flatrate!


Damit ihr die App tatsächlich mit einer Zeichenfunktion ausstatten könnt, braucht ihr zumindest Grundkenntnisse, was das canvas-Element betrifft.

Bilder



Um canvas nutzen zu können, müsst ihr im Browserfenster an der gewünschten Stelle ein canvas-Element einfügen. Im einfachsten Fall setzt man canvas folgendermaßen ein:
<canvas width="150" height="150">
   Ihr Browser kann die Grafik leider nicht anzeigen.
</canvas>

Über die beiden Attribute width und height werden Breite und Höhe der Leinwand definiert. Der zwischen dem öffnenden und schließenden Tag stehende Inhalt ist zu sehen, wenn der Browser das canvas-Element nicht korrekt anzeigen kann. Das muss übrigens nicht unbedingt einfacher Text sein. Ebenso sind Grafiken möglich, die über das img-Element eingebunden werden. Legt also einen alternativen Inhalt an, den ihr anzeigen lassen wollt, wenn canvas nicht zu sehen ist.

 
Das Ergebnis der Syntax ist zunächst einmal eine weiße, transparente Fläche. Um die Zeichenfläche optisch hervorzuheben, kann man auf CSS zurückgreifen und so die Fläche zum Beispiel mit einem Rahmen ausstatten.
<style type="text/css">
canvas {
border:2px dotted gray;
height:300px;
width:300px;
}
</style>

Das liefert schon mal ein erstes Ergebnis.

Bilder



Wollt ihr die Fläche mit Inhalten füllen und auf sie zuzugreifen, wird JavaScript benötigt.
<canvas width="150" height="150" id="meincanvas">
   Ihr Browser kann die Grafik leider nicht anzeigen.
</canvas>

 
Für diesen Zugriff stattet man das canvas-Element üblicherweise mit einer ID aus. Dazu dann aber anschließend mehr. Zunächst noch ein Hinweis zu einer alternativen Möglichkeit, das canvas-Element zu erstellen. Denn das lässt sich nicht nur per canvas-HTML-Element, sondern auch über JavaScript anlegen.

Ein Beispiel:
// Das canvas-Objekt definieren
var canv = document.createElement('canvas');
// Wenn das canvas-Objekt unterstützt wird
if(canv.getContext){
  // Hier folgen die Zeichendefinitionen
  document.getElementsByTagName('body')[0].appendChild(canv);
}else{
  // Weiterer Code
}

Diese Syntax erzeugt im Dokument ebenfalls ein canvas-Element. Verwendet wird dafür createElement. Welche der beiden Varianten ihr einsetzt, bleibt dabei natürlich euch überlassen.

Für den Zugriff auf die Zeichenfläche wird üblicherweise die JavaScript-Methode getElementByID() verwendet. Damit diese greift, muss das canvas-Element, wie das bereits beschrieben wurde, mit einer ID ausgestattet werden.
<canvas width="150" height="150" id="meincanvas">
   Ihr Browser kann die Grafik leider nicht anzeigen.
</canvas>

Um Zugriff auf die Zeichenfläche zu bekommen, muss man immer eine JavaScript-Variable deklarieren. Diese lässt sich als Referenz auf den entsprechenden Rendering Context verwenden. Ein solcher Rendering Context ist eine Schnittstelle, die die JavaScript-Attribute und -Methoden für das Zeichnen auf der Canvas-Oberfläche bereitstellen. Ihr könnt euch diesen Rendering Context ganz einfach als eine Sammlung verschiedener Eigenschaften für die Zeichenfläche vorstellen.

Der eigentliche Rendering Context wird über getContext() aufgerufen. Für normale Zeichnungen besitzt der Rendering Context die ID 2d. In HTML5 ist dieser 2D-Kontext momentan übrigens der einzige. Allerdings wird es in Zukunft wohl einen 3D-Kontext geben, über den sich 3D-Grafiken über OpenGL definieren lassen. (Das bedeutet jedoch nicht, dass man momentan vollständig auf 3D-Anwendungen verzichten müsste. Denn mittlerweile gibt es tatsächlich einige Canvas-Frameworks, mit denen sich solche Anwendungen umsetzen lassen).

 
Zurück zu getContext().
var canv = document.getElementById('meineCanvas ').
           canvas.getContext('2d ');

Der angelegten canv-Variablen können nun die Befehle zum Zeichnen übergeben werden.

Zuvor sollte man jedoch mittels if-Abfrage überprüfen, ob das canvas-Element im Browser tatsächlich verfügbar ist. Verwendet dafür am besten getElementByID. Denn so kann man testen, ob man auf Elemente mittels ID zugreifen kann. Innerhalb dieser if-Abfrage gibt es dann üblicherweise einen zweiten if-Zweig, der dann überprüft, ob im Browser getContext verfügbar ist.

Die Grundstruktur einer canvas-Funktion könnte also folgendermaßen aussehen:
<script>
/* <![CDATA[ */
function zeichnen(){
   if (document.getElementById){
      var $canvas=document.getElementById('meincanvas');
      var $context;
   if ($canvas.getContext){
      $context=$canvas.getContext('2d');
      //Hier stehen mögliche Zeichendefinitionen
   }
   }
} 
/* ]]> */ 
</script>

Damit sind die Grundlagen geschaffen und es kann eine erste Zeichnung angelegt werden. Dazu definiert man zunächst eine JavaScript-Funktion, in der die gewünschten Zeichenoptionen definiert werden.
<script>
/* <![CDATA[ */
function zeichnen(){
    var canvas = document.getElementById('meincanvas');
    if(canvas.getContext){
        var context = canvas.getContext('2d');
        context.fillStyle = "rgb(255, 0, 255)";
        context.fillRect(0, 0, canvas.width, canvas.height);
    }
}
/* ]]> */ 
</script>

In diesem Beispiel wird ein Rechteck gezeichnet, das automatisch so groß wie das canvas-Element ist.
Innerhalb des body-Elements muss ein canvas-Element mit der ID meincanvas vorhanden sein.
<canvas width="150" height="150" id="meincanvas">
   Ihr Browser kann die Grafik leider nicht anzeigen.
</canvas>

Die zuvor definierte JavaScript-Funktion muss man nun natürlich noch aufrufen. Üblicherweise geschieht das über den Event Handler onlaod im body-Element.
<body onload="javascript:zeichnen()">

Als Ergebnis bekommt man – wenn canvas vom Browser unterstützt wird – ein einfaches Rechteck.

Bilder



 
Aus welchen Bestandteilen sich eine canvas-Anwendung insgesamt zusammensetzt, wurde gezeigt. Eine Anwendung am Stück zu sehen ist aber natürlich immer hilfreich. Im folgenden Beispiel werden daher noch einmal die wichtigsten bereits gezeigten Elemente verwendet.
<!DOCTYPE html>
<html>
<head>
<title>Rechtecke</title>
<script>
/* <![CDATA[ */
function zeichne() {
var canvas = document.getElementById("meincanvas");
if (canvas.getContext) {
   var content = canvas.getContext("2d");

   content.fillStyle = "rgb(40,0,0)";
   content.fillRect (20, 20, 65, 60);

   content.fillStyle = "rgba(0, 0, 160, 0.5)";
   content.fillRect (40, 40, 65, 60);
   content.fillStyle = "rgba(40, 0, 0)";
   content.fillRect (60, 60, 65, 60);
}
 }
 /* ]]> */ 
 </script> 
 </head>
 <body onload="zeichne();">
 <   canvas width="150" height="150" id="meincanvas"></canvas>
 </body>
 </html>

 
Und auch hier wieder ein Blick auf das Ergebnis.

Bilder



Dieses Beispiel zeigt, wie sich canvas-Anwendungen aufbauen lassen. Benötigt werden also immer drei Dinge:

• eine canvas-Funktion
• der Aufruf dieser Funktion
• das canvas-Element selbst, das durch die Funktion mit Inhalten gefüllt wird.

Das Ergebnis der Syntax sind drei sich überlappende Rechtecke.


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 16.10.2016 - 15:32

Herzlichen Dank für das Tutorial

Portrait von MicroSmurf
  • 07.08.2014 - 17:00

Sehr interessant wie immer. Vielen Dank.

Portrait von Steve007
  • 05.08.2014 - 10:31

Vielen Dank für diesen weiteren Teil Deiner interessanten Reihe.

Portrait von Domingo
  • 27.07.2014 - 00:31

Vielen Dank für dieses tolle Tutorial.

Portrait von okamichan
  • 26.07.2014 - 19:58

Vielen Dank für dieses tolle Tutorial.Jetzt weiß ich wie man Html für Apps einsetzt.

Portrait von Kundentest
  • 26.07.2014 - 17:29

Herzlichen Dank für den weiteren Teil.

Portrait von Caesarion2004
  • 26.07.2014 - 17:29

Vielen Dank für das weitere sehr interessante Tutorial.

Portrait von Domingo
  • 26.07.2014 - 16:50

Danke auch von mir für diesen Teil des Tutorial.

Portrait von BOPsWelt
  • 26.07.2014 - 16:46

Danke für einen weiteren Teil des Tutorials. :)

Portrait von Steve007
  • 26.06.2014 - 20:55

Vielen Dank für diesen weiteren Teil Deiner interessanten Reihe.

Portrait von johen
  • 26.06.2014 - 14:38

Herzlichen Dank für das weitere Tutorial.

Portrait von MicroSmurf
  • 26.06.2014 - 13:21

Interessant wie immer.Danke.

Portrait von PSD4q5r9t
  • 26.06.2014 - 11:25

Sehr gut verständliche, klar strukturierte Erklärung. Weiter so. Danke,

Portrait von Kundentest
  • 26.06.2014 - 09:20

Herzlichen Dank für das weitere Video.

Portrait von renate_C
  • 26.06.2014 - 08:48

Ich bedanke mich für das interessante Tutorial. Wieder was gelernt.

Portrait von Caesarion2004
  • 26.06.2014 - 08:36

Vielen Dank für das informative und interessante Tutorial.

x
×
×