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