Grundzeichnung der HTML5-Leinwand: Zeichnen eines Rechtecks

ist ein neues Tag in HTML5, das zum Zeichnen von Grafiken verwendet wird. In diesem Artikel wird hauptsächlich die Methode zum Zeichnen eines Rechtecks ​​in der einfachen HTML5-Leinwand vorgestellt 🎜>

ist nur ein Container zum Zeichnen von Grafiken. Zusätzlich zu Attributen wie ID, Klasse, Stil usw. verfügt es auch über Höhen- und Breitenattribute . Es gibt drei Hauptschritte zum Zeichnen auf dem >-Element:

1. Rufen Sie das DOM-Objekt ab, das einem Canvas-Objekt entspricht die getContext-Methode (des Canvas-Objekts), um ein CanvasRenderingContext2D-Objekt abzurufen;

3. Rufen Sie das CanvasRenderingContext2D-Objekt zum Zeichnen auf.

Zeichne Rechtecke rect(), fillRect() und StrokeRect()

•context.rect( x , y , width , height ): Definiere nur den Pfad von das Rechteck ;

•context.fillRect( x , y , width , height ): zeichne direkt ein gefülltes Rechteck

•context.StrokeRect( x , y , width , height ): zeichne direkt einen rechteckigen Rand

JavaScript-Code

Inhalt in die Zwischenablage kopieren

Zwei Punkte müssen erklärt werden: Der erste Punkt ist die Reihenfolge, in der „Stroke()“ und „Fill()“ gezeichnet werden ist größer, die Hälfte des von Stroke() gezeichneten Rahmens wird offensichtlich abgedeckt. ;Zweiter Punkt: Wenn Sie das FillStyle- oder StrokeStyle-Attribut festlegen, können Sie es über die Einstellungsmethode „rgba(255,0,0,0.2)“ festlegen. Der letzte Parameter dieser Einstellung ist Transparenz.
Es gibt noch eine weitere Funktion im Zusammenhang mit der rechteckigen Zeichnung: Löschen des rechteckigen Bereichs: context.clearRect(x,y,width,height). Die empfangenen Parameter sind: Löschen Sie die Startposition des Rechtecks ​​sowie die Breite und Länge des Rechtecks.
1. Fügen Sie im obigen Code am Ende des Zeichnens der Grafiken Folgendes hinzu:

context.clearRect(100,60,600,100);

2. , um den folgenden Effekt zu erzielen:

Das obige ist der detaillierte Inhalt vonGrundzeichnung der HTML5-Leinwand: Zeichnen eines Rechtecks. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!