Anzeige
Tutorialbeschreibung

Web-Apps erstellen (Teil 19): Zeichnen mit canvas (3)

Web-Apps erstellen (Teil 19): Zeichnen mit canvas (3)

In diesem letzten canvas-Teil geht es darum, die Malfunktion umzusetzen. Damit aber tatsächlich am Smartphone und Tablet gemalt werden kann, müsst ihr eine entsprechende Funktion definieren. Deren Inhalt orientiert sich an den Dingen, die in den vorherigen Video-Trainings beschrieben wurden. Los geht es aber mit einem Aspekt, der bislang noch unbeleuchtet blieb, nämlich den Farben. Am Ende dieses Video-Trainings bekommt ihr den vollständigen Code für die eigentliche Mal-App.

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


Natürlich lassen sich die gezeichneten Elemente (und Texte) farbig gestalten. Dafür gibt es zwei Herangehensweisen:

• Farben
• Stile

Farbdefinitionen kennt ihr aus HTML.

Bilder



 
So wird dort wie auch im canvas-Element auf die hexadezimale Schreibweise zurückgegriffen. Allerdings wird beim canvas-Element zwischen zwei Zuständen unterschieden.

• keine Transparenz (alpha = 1.0)
• Transparenz (0.0 < alpha < 1.0)

Im ersten Fall wird ein sechsstelliger hexadezimaler Code angegeben, dem eine Raute vorangestellt ist.
#rrggbb

Die ersten beiden Werte stehen für Rot, die nächsten beiden für Grün und die letzten beiden Werte repräsentieren Blau. Erlaubt sind Zahlenwerte zwischen 0 und 9 sowie Buchstaben zwischen a und f.

Alternativ dazu kann man zusätzlich eine Transparenz bestimmen. Verwendet wird dafür rgba().
rgba(red, green, blue, alpha)

Auch bei rgba() werden zunächst die Rot-, Grün- und Blau-Anteile definiert. Zusätzlich lässt sich aber auch die Deckkraft der Farbe bestimmen. Allerdings müssen bei rgba() die einzelnen Werte durch Kommata voneinander getrennt werden. Die Farbwerte liegen jeweils in einem Bereich zwischen 0 und 255. Der Wert für die Transparenz liegt zwischen 0.0 (absolute Transparenz) und 1.0 (keine Transparenz.)

Ein Beispiel:
rgba(255, 0, 0, 0.25);


 

Zeichnen per Touch

Interessant ist canvas vor allem auch in Verbindung mit der Touch-Oberfläche von Smartphones und Tablets. Denn so kann man es den Benutzern ermöglichen, direkt mit dem Finger zu zeichnen. Eine solche Anwendung lässt sich vergleichsweise einfach umsetzen.

Bilder



Dazu definiert man zunächst ein canvas-Element.
<canvas id="canvas" width="600" height="600">
  Ihr Browser ist leider nicht HTML5-kompatibel
</canvas>

Damit das Ganze auch optisch etwas "greifbarer" ist, wird die canvas-Fläche mit einem Rand ausgestattet.
canvas{
  outline: 1px dashed #000;
  background-color:#fff;
}

 
Damit sind die Voraussetzungen für eine canvas-Touch-Anwendung geschaffen. Im ersten Schritt registriert man das canvas-Element.
var canvasEl = document.getElementById('canvas');
var canvas = canvasEl.getContext('2d');

Daran schließen sich die zwei globalen Variablen startX und startY an.
var startX, startY;

Dabei handelt es sich um die Koordinaten, an denen die Anwender die Finger auf der Touch-Oberfläche absetzen.

Im nächsten Schritt legt man die Art und Weise fest, in der schlussendlich gezeichnet werden soll. Hierzu definiert man Strichstärke und Farbe. Ich bestimme dazu Schwarz als Farbe und exakt einen Pixel Strichstärke.
canvas.strokeStyle = "#000";
canvas.lineWidth = 1;

Jetzt muss man zwei Funktionen definieren:

• eine, wenn die Finger die Oberfläche berühren und
• eine, wenn die Finger auf der Oberfläche bewegt werden

Zunächst die Funktion touchStart:
var touchStart = function(event) {
    startX = event.touches[0].pageX;
    startY = event.touches[0].pageY;
    canvas.moveTo(startX, startY);
};

Über event.touches[0].pageX und event.touches[0].pageY werden jeweils die Positionen der Finger auf der Touch-Oberfläche ausgelesen. Die dabei ermittelten Werte speichert man innerhalb der beiden Variablen startX und startY.

Im nächsten Schritt wird die Funktion touchMove definiert. Diese Funktion ist ebenfalls entscheidend, was das Zeichen betrifft.
var touchMove = function(event) {
    event.preventDefault();
    canvas.lineTo(event.touches[0].pageX, event.touches[0].pageY);
    canvas.stroke();
};

Innerhalb dieser Funktion wird die Scrollbewegung der Seite über preventDefault() deaktiviert. Das ist enorm wichtig, da ansonsten die Seite bei jeder Fingerbewegung, die auf dem Bildschirm erfolgt, gescrollt werden würde. Das eigentliche Zeichnen erfolgt dann über canvas.lineTo().

 
Nun folgt die Beendigung der Zeichenfunktion. Definiert wird dafür eine eigene Funktion.
var touchEnd = function(event) {
    canvas.stroke();
};

Für das Zeichnen selbst sind die sogenannten EventListener entscheidend. Denn diese registrieren jedes eintretende Ereignis und führen daraufhin eine entsprechende Funktion aus. Wie so etwas aussehen kann, zeigt das folgende Beispiel:
canvasEl.addEventListener("touchstart", touchStart, false);
canvasEl.addEventListener("touchmove", touchMove, false);
canvasEl.addEventListener("touchend", touchEnd, false);

Hier seht ihr u.a. den Eintrag canvasEl.addEventListener("touchstart", touchStart, false);. Dieser besagt eigentlich nichts anderes, als dass die Funktion touchStart ausgeführt werden soll, sobald das Ereignis touchstart eintritt. touchstart bedeutet in diesem Fall also die Berührung des Bildschirms. Die Funktion touchStart kennt ihr bereits.
var touchStart = function(event) {
    startX = event.touches[0].pageX;
    startY = event.touches[0].pageY;
    canvas.moveTo(startX, startY);
};

Mehr ist tatsächlich nicht nötig, um eine entsprechende Mal-App zu erstellen. Erfahrungsgemäß ist es aber natürlich immer hilfreich, wenn man den Code, den man für eine solche App braucht, noch einmal gebündelt sieht. Nachfolgend findet ihr daher den vollständigen Code, mit dessen Hilfe ihr eure eigene Mal-App definieren könnt.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>PSD-Tutorials.de</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js"></script>
<style type="text/css">
canvas{
outline: 1px dashed #000;
background-color:#fff;
}
</style>
</head>
<body>
<div id="top" data-role="page" data-theme="a">
<div data-role="header" data-position="fixed">
  <h1>Willkommen bei PSD-Tutorials.de</h1>
</div>
<div data-tole="content">
  <canvas id="canvas" width="600" height="600">Ihr Browser ist leider nicht HTML5-kompatibel </canvas>
  <script type="text/javascript">
var canvasEl = document.getElementById('canvas');
var canvas = canvasEl.getContext('2d');
var startX, startY;
canvas.strokeStyle = "#000";
canvas.lineWidth = 1;
var touchStart = function(event) {
    startX = event.touches[0].pageX;
    startY = event.touches[0].pageY;
    canvas.moveTo(startX, startY);
};
var touchMove = function(event) {
    event.preventDefault();
    canvas.lineTo(event.touches[0].pageX, event.touches[0].pageY);
    canvas.stroke();
};
var touchEnd = function(event) {
    canvas.stroke();
};
canvasEl.addEventListener("touchstart", touchStart, false);
canvasEl.addEventListener("touchmove", touchMove, false);
canvasEl.addEventListener("touchend", touchEnd, false);
</script>
</div>
<div data-role="footer">
<div data-role="navbar">
<ul>
<li><a href="about.html" data-icon="info">Über uns</a></li>
<li><a href="kontakt.html" data-icon="grid">Kontakt</a></li>
<li><a href="anfahrt.html" data-icon="star">Anfahrt</a></li>
<li><a href="impressum.html" data-icon="gear">Impressum</a></li>
<li><a href="#infos" data-icon="gear">Themen</a></li>
</li>
</div>
</div>
</div>
<div id="infos" data-role="page">
  <div data-role="header" data-position="fixed">
    <h1>Mehr zum Thema</h1>
  </div>
  <div data-tole="content">
    <p>Hier folgen die Detailinformationen</p>
  </div>
</div>
</body>
</html>

Dieses Beispiel zeigt, wie einfach sich eigentlich solche Apps erstellen lassen.

Bilder



Selbstverständlich könnt ihr die Mal-App noch weiter ausbauen. Entscheidend ist lediglich, dass ihr wisst, wie sich die canvas-Eigenschaften definieren lassen und wir ihr diese letztendlich mit den EventListener verknüpfen könnt.


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

Herzlichen Dank für den weiteren Teil.

Portrait von Steve007
  • 05.08.2014 - 10:32

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

Portrait von Domingo
  • 29.07.2014 - 18:22

Vielen Dank für den nächsten Teil.

Portrait von CptnAhu
  • 29.07.2014 - 15:59

Große Klasse, Vielen Dank!!

Portrait von Caesarion2004
  • 29.07.2014 - 15:21

Vielen Dank für den weiteren, sehr gut gemachten Teil samt Datei.

Portrait von Domingo
  • 29.07.2014 - 14:07

Eine schöne Reihe, vielen Dank.

Portrait von maew
  • 29.07.2014 - 13:17

Klasse Tutorial-Serie, vielen Dank!

Portrait von BOPsWelt
  • 29.07.2014 - 13:04

Vielen Dank für den nächsten Teil der Reihe.

Portrait von Kundentest
  • 29.07.2014 - 12:35

Herzlichen Dank für den weiteren Teil.

Portrait von MicroSmurf
  • 03.07.2014 - 15:06

Wie immer sehr interessant. Danke.

Portrait von Domingo
  • 03.07.2014 - 00:34

Das hat mir gefallen.

Portrait von Kundentest
  • 02.07.2014 - 21:57

Herzlichen Dank für das Video.

Portrait von johen
  • 02.07.2014 - 20:18

Sehr schönes Tutorial.Danke sehr !

Portrait von Caesarion2004
  • 02.07.2014 - 20:09

Vielen Dank für den interessanten und informativen Tutorial-Teil sowie für die ganze Reihe.

x
×
×