Wie man ein Dreieck in HTML

October 22

Die HyperText Markup Language wird hauptsächlich zum Anordnen von Text, Bildern und multimedia-Inhalte auf Webseiten verwendet. Jedoch neben einer Reihe von anderen wichtigen Verbesserungen können der neue HTML5-Standard Sie beliebige 2D Zeichnungen auf Websites mit HTML und JavaScript-Code zu produzieren. Zeichnen eines Dreiecks in HTML mit dem Canvas-Element mit JavaScript-Code.

Anweisungen

1 Fügen Sie die folgende JavaScript-Funktion zwischen den Head-Tags Ihres HTML-Dokuments ein:

< Skript-Typ = "Text/Javascript" >

Funktion drawTriangle(canvasid) {}

var canvas = document.getElementById(canvasid);

var context = canvas.getContext("2d");

context.moveTo(10,4);

context.lineTo(180,190);

context.lineTo(15,150);

context.closePath();

context.stroke();

}

< / script >

Ändern Sie die Koordinaten der Eckpunkte des Dreiecks in den Methodenaufrufen "MoveTo" und "LineTo". Die obere linke Ecke ein Canvas-Elements ist der Ursprung der sein Koordinatensystem.

2 Fügen Sie das Attribut "OnLoad", um das Body-Tag von Ihrem HTML-Dokument "DrawTriangle" aufrufen, wenn die Seite geladen. Hier ist ein Beispiel-Body-Tag:

< Körper onLoad="drawTriangle('canvas1');" >

3 Fügen Sie ein Canvas-Element in den Hauptteil Ihres HTML-Dokuments, passend sein Attribut "Id", die Sie, im Aufruf von verwendet "DrawTriangle:"

< Leinwand Id = "canvas1" Width = "200" Height = "200" >< / Leinwand >

Passen Sie die "Breite" und "Height" Attribute wie nötig, um Ihr Dreieck passen.

4 Speichern Sie die Seite und laden Sie es in einem Webbrowser. Ihr Dreieck wird in das Canvas-Element auf der Seite angezeigt.

Tipps & Warnungen

  • Fügen Sie das folgende Tag am Anfang Ihres HTML-Dokuments--vor dem ersten html-Tag--zur Gewährleistung der Kompatibilität mit Internet Explorer 9 des Canvas-Elements:
  • <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 / / EN" "als http://www.w3.org/TR/html4/strict.dtd" >
  • Verwenden Sie die "Füllung"-Methode des Kontextobjekts ein solides Dreieck gezeichnet.
  • Die "StrokeStyle" und/oder "FillStyle" Eigenschaften des Context-Objekts ändern des Dreiecks Farbe weisen Sie Farben zu.

SIE KÖNNEN AUCH GERNE