Wie auf Leinwand mit einer Maus in HTML zu zeichnen

HTML 5 Canvas-Tag können Sie eine Box anzeigen, in der Benutzer zum Erstellen von Zeichnungen im Canvas eine Maus verwenden können. Sie verwenden das HTML 5 Canvas-Tag zusammen mit der JavaScript-Sprache das Zeichenwerkzeug erstellen. Der Browser des Benutzers muss das Leinwand-Tool für den Code Funktion unterstützen; Firefox, Opera, Chrome und Internet Explorer unterstützt das Canvas-Tag.

Anweisungen

1 Maustaste auf Ihre Web-Seite HTML-Datei, und klicken Sie auf "Öffnen mit". Klicken Sie in Ihrem bevorzugten HTML-Editor in der Liste der Programme.

2 Der Code das Canvas-Tag hinzufügen. Sie können die Leinwand an beliebiger Stelle innerhalb des Body-Tags hinzufügen. Fügen Sie den folgenden Code in den HTML-Body-Tags:

< Leinwand Id = "Zeichnung" Width = "400" Height = "400" >Ihr Browser unterstützt nicht das Leinwand-Tool.< / Leinwand >

Der Text innerhalb der Tags wird nur angezeigt, wenn der Browser des Benutzers das Canvas-Tag nicht unterstützt.

3 Fügen Sie den JavaScript-Code zur Unterstützung der Zeichnung mit der Maus. Kopieren Sie und fügen Sie das folgende Skript Zeichnung Unterstützung hinzuzufügen:

Funktion draw(m) {}X = m.layerX;

y = m.layerY;

Wenn (! gestartet) {}

context.beginPath(); context.moveTo(x, y); started = true;

} else {}

context.lineTo(x, y); context.stroke();

}

4 Fügen Sie den Link, der JavaScript-Funktion in das Canvas-Tag-Definition. Die Funktion-Trigger, wenn der Benutzer die Maus klickt und die Maus über die Leinwand-Dienstprogramm bewegt. Fügen Sie den folgenden Code, um die Leinwand-Tag-Definition:

OnMouseMove="Draw(this)"

5 Speichern Sie die Dateiänderungen, und öffnen Sie die Datei in Ihrem Web-Browser. Die Leinwand wird geladen und zeigt im Fenster Webseite.

6 Bewegen Sie Ihre Maus über die Leinwand. Klicken Sie die linke Maustaste über die Leinwand und ziehen Sie die Maus über die Leinwand. Eine schwarze Linie stützt sich auf die Leinwand, während Sie die Maus über die Leinwand-Box bewegt.