HTML5 -Leinwand

 <canvas id = mycanvas width = 400 Höhe = 200>

Die Standardeinstellung <Canvas> Canvas zeigt ein leeres, randloses Rechteck auf der Seite an. Um die Kontur anzuzeigen, fügen Sie ihm eine gepunktete Lünette hinzu, indem Sie die Regeln des Stils definieren:

 Canvas {Border: 1px gestrichelt schwarz;}

Um die Zeichnungsaufgabe zu erledigen, müssen wir zunächst das Objekt <Canvas> erhalten und dann seinen zweidimensionalen Zeichnungskontext erhalten.

Die folgende Beispieldemonstration wird durch die Zeichnung der Zeichnung erhalten, wenn die Seite geladen wird:

 <Script> Fenster.onload = Funktion () {var canvas = document.getElementById (mycanvas);

(1) Der Startpunkt ist (50,50) unten (50,50) und der Endpunkt ist (150,150) gerade Linienleitungen

 Kontext.Moveto (50, 50);

(2) Stellen Sie die Breite und Farbe der Linien mit Linienbreiten- und Strokestyle -Attributen ein

 // Zeilenbreite Kontext.LineWidth = 10; 50);

(3) Stellen Sie die Form beider Enden der Linie (Zeilenkopftyp) mit der Linecap -Eigenschaft ein:

1. Butt: fangtou (Standardwert)
2. Runde: Runder Kopf
3. Quadrat: Square Head (der Effekt ist dem Hintern ähnlich, aber die Länge der beiden Linien der Linie erhöht die Länge der Hälfte der Linienbreite)

 var canvas = document.getElementById (mycanvas); Side Tore Context.Moveto (50, 50); ; context.lineCap = square;

Das obige Beispiel kann sehen, dass jedes Mal, wenn das neue Liniensegment gezogen wird, die Methode von BeginnPath () aufgerufen wird.

Ohne diesen Schritt werden Sie jedes Mal, wenn Sie Stroke () anrufen, das ursprüngliche Zeilensegment auf der Leinwand erneut zeichnen. Insbesondere wie das obige Beispiel müssen die Kontextattribute beim Zeichnen einer neuen Zeile geändert werden.