suchen

Heim >Web-Frontend >H5-Tutorial >Einführung in die Verwendung des Canvas-Elements von HTML5 (Zeichnen von Rechtecken, Polylinien, Kreisen)_HTML5-Tutorial-Fähigkeiten

Einführung in die Verwendung des Canvas-Elements von HTML5 (Zeichnen von Rechtecken, Polylinien, Kreisen)_HTML5-Tutorial-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:48:021344Durchsuche

Canvas bezieht sich im Allgemeinen auf Canvas. In letzter Zeit interessiere ich mich mehr für die Verwendung von HTML5 zum Schreiben von Spielen, deshalb habe ich einfach Canvas verwendet.

Ich habe Canvas bereits in Silverlight und WPF verwendet. In Silverlight ist Canvas ein absolut positionierter Container, in dem jedes Steuerelement platziert werden kann. Über ihn können wir Canvas, Grafikanwendungen, GIS-Anwendungen usw. erstellen.

In HTML5 ist Canvas ein neues Tag:

Kopieren Sie den Code
Der Code lautet wie folgt:



Es verfügt über alle Attribute des grundlegenden HTML-Tags, und Sie können auch Stile dafür festlegen.


Code kopieren
Der Code lautet wie folgt:




Er hat auch ein bestimmtes Attribut:

Code kopieren
Der Code lautet wie folgt:



Die Höhe und Breite hier sind die gleichen wie zuvor. Die Attribute des HTML-Tags sind unterschiedlich und sie unterscheiden sich auch von der Höhe und Breite im Stil. Dies bezieht sich hauptsächlich auf den Koordinatenbereich in der Leinwand. Die Breite und Höhe im Stil beziehen sich auf die tatsächliche Anzeigegröße der Leinwand.

Definieren Sie beispielsweise die folgende Leinwand:

Kopieren Sie den Code
Der Code lautet wie folgt:



Zeichnen Sie dann ein Rechteck auf der Leinwand mit den Koordinaten 100 und 50 und den Größen 200 und 150. Sie werden den tatsächlichen Effekt wie unten gezeigt sehen:

Die Größe der Leinwand im Bild wird durch den Stil 600px * 450px bestimmt, aber die Koordinaten zum Ausfüllen der gesamten Leinwand betragen nur 400*300, entsprechend der Größe in Klammern.

Das Zeichnen auf Leinwand basiert auf Koordinaten, daher werden die Koordinaten 100, 50 in Bildschirmkoordinaten von 150 Pixel, 75 Pixel umgewandelt, und die Größe des Rechtecks ​​wird ebenfalls von 200 x 150 in die Bildschirmgröße von 300 Pixel x 225 Pixel umgewandelt.

Sie können es selbst ausprobieren, indem Sie dem folgenden Code folgen:


Code kopieren
Der Code lautet wie folgt: