Einführung in die Verwendung von HTML5 zum Erstellen eines Zeichenbretts_HTML5-Tutorial-Fähigkeiten

Das erste, was Sie beachten sollten, ist, dass Sie nicht mit der Maus zeichnen, sondern mit den Fingern auf einem Touch-Gerät, beispielsweise einem iPad.

Um ein Zeichenbrett zu erstellen, verwenden Sie natürlich HTML5-Canvas. Auf der Leinwand können wir Kreise, Rechtecke, benutzerdefinierte Linien usw. zeichnen. Dieses Mal verwende ich hauptsächlich das Zeichnen von Kreisen und Linien, um dies zu erreichen. Die Reaktion auf Berührungsereignisse wird in HTML unterstützt.

onTouchStart Touch-Start

onTouchMove Touch-Folie

onTouchEnd Touch Ende

Mit diesen Ereignissen ist es für uns sehr einfach, mit den Fingern im Browser zu zeichnen.

Auswirkung auf IPAD:

Idee: Wenn der Finger den Bildschirm berührt, fügen Sie im onTouchStart-Ereignis einen Kreis an der Position hinzu, an der der Finger zu gleiten beginnt, und bewegen Sie sich kontinuierlich vom vorherigen Berührungspunkt zum nächsten in onTouchMove Eine gepunktete Linie.

HTML:

Code kopieren

Der Code lautet wie folgt:

gt ;

JS:

Code kopieren

Der Code lautet wie folgt:

//canvas.width= window.innerWidth ;
canvas.height=window.innerHeight;
//Ob Touch unterstützt wird
var touchable = 'createTouch' in document;
if (touchable) {
canvas.addEventListener ('touchstart' , onTouchStart, false);
canvas.addEventListener('touchmove', onTouchMove, false);
}
else
{
warning("touchable is false !") ;
}
//Letzte Berührungskoordinaten
var lastX;
var lastY;

var ctx =canvas.getContext("2d");
ctx.lineWidth=10;//Pinseldicke
ctx.StrokeStyle="#FF0000";//Pinselfarbe

//Touch start event
function onTouchStart(event) {
event.preventDefault();
lastX=event.touches[0].clientX;
lastY=event.touches[ 0].clientY;
drawRound(lastX,lastY);

}
//Touch Sliding Event
function onTouchMove(event) {
try
{
event.preventDefault();
drawLine(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);
}

}

//Zeichne einen Kreis
function drawRound(x,y)
{
ctx.fillStyle="#FF0000";
ctx.beginPath();
ctx.arc ( x,y,5,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
}
//Linie zeichnen
Funktion drawLine(startX,startY,endX,endY)
{
ctx.beginPath();
ctx.lineCap="round";
ctx.moveTo(startX,startY);
ctx .lineTo(endX,endY);
ctx.Stroke();
}

Wichtige Punkte:

ctx.lineCap="round"; Stellen Sie die Stilkappe am Ende der gezeichneten Linie auf rund ein. Dies ist sehr kritisch, da es sonst an Stellen, an denen sich der Winkel der Linie stark ändert, zu Brüchen kommt.

event.preventDefault(); Bricht die Standardaktion des Ereignisses ab. Diese Methode muss im Sliding-Ereignis aufgerufen werden. Andernfalls wird beim Schieben das Standard-Schiebeereignis des Browsers ausgelöst, die Seite wird nach unten gezogen und Sie können nicht zeichnen.