HTML and CSS Reference
In-Depth Information
die globalen Variablen startX und startY . In Ihnen werden Sie später speichern, wo
der Nutzer seinen Finger aufsetzt.
var canvasEl = document.getElementById('canvas');
var canvas = canvasEl.getContext('2d');
var startX, startY;
4
Im nächsten Schritt legen Sie den Zeichenstil fest. Wenn Sie möchten, können Sie
hier Linienfarbe, Stärke und Effekte variieren. Der Einfachheit halber entscheiden wir
uns für eine dünne schwarze Linie:
canvas.strokeStyle = "#000";
canvas.lineWidth = 2;
Jetzt kommt der eigentlich wichtige Teil: Sie fügen die Zeichenfunktion hinzu. Da ein
Touch-Gerät ja bekanntlich keine Maus besitzt und somit nicht auf Klicken oder
Mausbewegung reagiert, müssen Sie im JavaScript die Fingerbewegungen verarbei-
ten. Dafür legen Sie zwei Funktionen an: eine, die ausgeführt wird, sobald der Finger
den Bildschirm berührt, und eine, die bei Fingerbewegung aufgerufen wird.
Die Funktion touchStart liest nun die Position des Fingers aus: event.touches[0]
.pageX ist die X-Position, event.touches[0].pageY die Y-Position im Koordinatensys-
tem. Die Werte werden den Variablen startX und startY zugewiesen, anschließend
wird der Ursprungspunkt des Pfades dorthin bewegt.
Die Funktion touchMove , welche bei jeder Fingerbewegung ausgeführt wird, deakti-
viert nun zunächst mit event.preventDefault() das Scrollen der Seite. Bei jeder Bewe-
gung wird die aktuelle Position des Fingers ausgelesen und eine Linie von der
vorherigen zur aktuellen Position gezeichnet.
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();
};
Damit Fingerbewegung und Fingerberührung von JavaScript verarbeitet werden
können, müssen Sie noch jeweils einen sogenannten EventListener definieren. Dieser
»horcht«, ob ein bestimmtes Ereignis eintritt, und führt dann eine Funktion aus:
Search WWH ::




Custom Search