HTML and CSS Reference
In-Depth Information
4.5.3 Zeichnen per Touch-Eingabe
Da die Zeichenoperationen nicht auf dem Server, sondern im Webbrowser direkt
beim Benutzer stattfinden, können diese vom Benutzer per JavaScript-Events in
Echtzeit beeinflusst werden. Im Folgenden werden Sie eine kleine WebApp entwi-
ckeln, mit der Sie auf dem iPhone mit Ihrem Finger malen können.
Wir erstellen diese App speziell für das iPhone 4 und 4S. Hier kommt ein interessan-
ter Effekt zum Tragen: Da iOS davon ausgeht, dass Webseiten üblicherweise nicht für
hochauflösende Retina-Bildschirme optimiert werden, verdoppelt das System ein-
fach die Pixelgröße. Dem normalen Nutzer fällt dies kaum auf, da Schriften und Vek-
torobjekte trotzdem mit 326 ppi gerendert werden. Da es sich beim Canvas-
Rendering allerdings um Pixeldaten handelt, wirken diese auf Apples neuesten Gerä-
ten schnell, nun ja, pixelig. Wir bedienen uns hier eines kleinen Tricks:
<meta name="viewport" content="width=device-width, initial-scale=0.5,
maximum-scale=0.5"/>
In Abschnitt 2.4.3, »Von der Webseite zur WebApp«, haben Sie bereits gelernt, wie die
viewport
-Eigenschaft funktioniert. Indem Sie
initial-scale
und
maximum-scale
auf
0.5
setzen, verkleinern Sie die Webseite auf 50 % und heben somit die Pixelverdop-
pelung auf. Dadurch wirken alle Linien und Bilddaten nun feiner und schärfer, vor
allem wird aber das Rendering auf dem Mobilgerät schneller: Erstaunlicherweise kos-
tet die Pixelverdopplung auf dem iPhone eine ganze Menge Rechenpower, die Sie
durch das Herauszoomen wieder hinzugewinnen.
Als Nächstes legen Sie im HTML-Code ein
canvas
-Element in voller Gerätebreite an:
<canvas width="640" height="640" id="canvas"></canvas>
Damit Sie später bis zum Bildschirmrand zeichnen können, entfernen Sie im CSS den
Außenabstand des
body
-Elements. Die Canvas bekommt zur besseren Unterscheid-
barkeit wieder einen leichten grauen Rand:
body {
margin: 0;
}
canvas {
outline: 1px dotted #ccc;
}
Nachdem die Grundlagen gelegt sind, definieren Sie im JavaScript-Code ein Canvas-
Objekt, welches mit dem
canvas
-Element verknüpft wird. Außerdem deklarieren Sie
Search WWH ::
Custom Search