Kommentar: Beim Erstellen eines Zeichenbretts verwenden wir natürlich die Leinwand von HTML5, um es zu erreichen. In Leinwand können wir Kreise, Rechtecke, benutzerdefinierte Linien usw. zeichnen. Diesmal verwenden wir hauptsächlich Kreise und Linien, um dies zu erreichen. Unterstützen Sie die Antwort auf Berührungsereignisse in HTML
Das erste, was zu beachten ist, ist, dass wir nicht mit der Maus zeichnen, sondern unsere Finger auf dem Touch -Gerät wie dem iPad verwenden.
Um ein Zeichenbrett zu erstellen, verwenden wir natürlich die Leinwand von HTML5, um es zu erreichen. In Leinwand können wir Kreise, Rechtecke, benutzerdefinierte Linien usw. zeichnen. Diesmal verwenden wir hauptsächlich Kreise und Linien, um dies zu erreichen. Die Reaktion auf Touch -Ereignisse wird in HTML unterstützt.
Ontouchstart Touch Start
Ontouchmove Touch Swipe
Ontouchend Touch End
Bei diesen Ereignissen ist es für uns sehr einfach, den Browser mit den Fingern einzuziehen.
Auswirkungen auf das iPad:
Idee: Wenn Ihr Finger den Bildschirm berührt, fügen Sie der Berührungsposition des Fingers im OnTouchstart -Ereignis einen Kreis hinzu. Wenn Ihr Finger zu gleiten beginnt, zeichnen Sie ständig Linien vom vorherigen Berührungspunkt zum nächsten Punkt in OnTouchmove.
HTML:
<! DocType html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transsitional.dtd"></p><html xmlns = "http://www.w3.org/1999/xhtml">
<kopf>
<title> canvas </title>
<meta name = "viewPort" content = "width = Gerätebidth, Benutzer-scalable = no">
</head>
<body>
<Canvas>/canvas>
<script type = "text/javaScript" src = "canvascript.js" charset = "utf-8"> </script>
</body>
</html>
JS:
// Holen Sie sich Leinwand
var canvas = document.getElementById ("canvas");
// Vollbild
canvas.width = window.innnerwidth;
canvas.height = window.innerHeight;
// Ob es den Berührung unterstützt
var Touchable = 'CreateTouch' im Dokument;
if (berührbar) {
Canvas.AddeVentListener ('TouchStart', OnTouchstart, False);
canvas.addeventListener ('TouchMove', OnTouchmove, False);
}
anders
{
alarm ("berührbar ist falsch!");
}
// Letzte Berührungskoordinaten
var lastx;
var lasty; </p> <p> var ctx = canvas.getContext ("2d");
ctx.linewidth = 10; // Die Dicke des Pinsels
ctx.strokestyle = "#ff0000"; // Pinselfarbe </p> <p> // Touch Start Event
Funktion OnTouchstart (Ereignis) {
Event.PreventDefault ();
lastx = event.touches [0] .clientX;
lasty = event.touches [0] .clienty;
DrawRound (lastx, lasty); </p> <p>}}
// Touch Sliding Event
Funktion OnTouchMove (Ereignis) {
versuchen
{
Event.PreventDefault ();
Dractline (Lastx, Lasty, Event.Touches [0] .ClientX, Event.Touches [0] .Clienty);
lastx = event.touches [0] .clientX;
lasty = event.touches [0] .clienty;
}
catch (err) {
alert (err.description);
} </p> <p>} </p> <p> // Zeichnen Sie einen Kreis
Funktion Drawround (x, y)
{
ctx.fillStyle = "#ff0000";
ctx.beginPath ();
ctx.arc (x, y, 5,0, math.pi*2, true);
ctx.closepath ();
ctx.fill ();
}
// Linien zeichnen
Funktion DRAGLINE (STARTX, STARTY, ENDX, Endy)
{
ctx.beginPath ();
ctx.linecap = "rund";
ctx.moveto (startx, starty);
ctx.lineto (endx, endy);
ctx.stroke ();
}
Schlüsselpunkte:
ctx.linecap = rund; Legt die Stilkappe am Ende der gezeichneten Linie auf einen Kreis. Dies ist sehr wichtig, sonst werden Bänder an Orten gebrochen, an denen sich der Linienwinkel stark ändert.
Event.PreventDefault (); Steckt die Standardaktion des Ereignisses ab. Diese Methode muss während des Schiebereignisses angepasst werden. Andernfalls wird das Standard-Schiebereignis des Browsers beim Schieben ausgelöst, und der Dropdown-Effekt der Seite tritt auf, und Sie können ihn nicht zeichnen.