html5 Canvas-Zeichen-Tutorial (9) – Zeichnen von Rechtecken und Kreisen im Canvas_html5-Tutorial

In diesem Artikel geht es um das Zeichnen von Rechtecken und Kreisen auf Leinwand. Natürlich gibt es grundlegendere Grafiken als diese, aber auf Leinwand können Sie nur Rechtecke und Kreise zeichnen, ohne andere Methoden zu deren Simulation zu verwenden.

Canvas zeichnet ein Rechteck
1, fillRect und StrokeRect
fillRect kann ein Rechteck direkt füllen, und der Füllstil ist der Stil, den Sie aktuell festlegen; Das gleiche Prinzip besteht darin, ein Rechteck direkt zu streichen
Ihre Parameter sind in der Reihenfolge konsistent (Startpunkt x-Koordinate, Startpunkt y, rechteckige Breite, rechteckige Höhe). Der Startpunkt bezieht sich hier, beachten Sie, auf die obere linke Ecke des Rechtecks.
Wir benutzen sie normalerweise, um einfache Dinge zu tun, und sie können nur einfache Dinge tun. Warum? Da es in den von ihnen gezeichneten Grafiken keinen „Pfad“ gibt, kam es einfach direkt heraus.
Wenn Sie beispielsweise zuerst ein Rechteck mit fillRect füllen und dann das Rechteck streichen möchten, hat die Verwendung von Stroke() keine Auswirkung, da es zwar ein Rechteck, aber keinen Pfad gibt.
Wenn Sie dieses Rechteck unbedingt streichen möchten, können Sie StrokeRect() verwenden, um ein Rechteck an derselben Position zu streichen – aber eigentlich sind sie unabhängig, nur überlappende Positionen.

Code kopieren

Der Code lautet wie folgt:

ctx.fillRect(200,100, 50,40 );
ctx.StrokeRect(200,100,50,40);

Wenn wir ein Rechteck mit Füllung und Strich wollen, dann ist die gleichzeitige Verwendung von FillRect und StrokeRect zweifellos ausreichend umständlich sein. In diesem Fall verwenden wir normalerweise die folgende Methode.

2, rect
Die Parameter von rect unterscheiden sich nicht von fillRect und StrokeRect. Der Unterschied besteht darin, dass nur ein Pfad oder eine Füllung gezeichnet wird Vervollständigen Sie es später selbst.

Code kopieren

Der Code lautet wie folgt:

ctx.rect(300,100, 50,40 );
ctx.Stroke()
ctx.fill();

Was sind die Vorteile davon? Ich habe im vorherigen Artikel erwähnt, dass das Füllen oder Streichen viele Ressourcen verbraucht, sodass wir oft Hunderte von Pfaden gleichzeitig zeichnen müssen (z. B. Schleifen) und sie dann streichen oder füllen müssen. Verwenden Sie zu diesem Zeitpunkt rect, um den Pfad zu zeichnen und ihn am Ende zu füllen, wodurch das Problem vermieden wird, dass fillRect und StrokeRec jedes Mal füllen oder streichen müssen.

3, lineTo
Natürlich können Sie auch 4 lineTo verwenden, um ein Rechteck zu zeichnen, wie in meinem Strichzeichnungs-Tutorial. Dies ist jedoch nicht erforderlich. Weitere Informationen finden Sie in diesem Artikel.

Canvas zeichnet einen Kreis
Es gibt kein Auge am Himmel. Tatsächlich hat Canvas keine echte Funktion, die einen Kreis zeichnen kann 360-Grad-Bogen, es sieht aus wie ein Kreis.
Wir haben bereits über die Funktion der Leinwand zum Zeichnen von Bögen gesprochen, nämlich Bogen. Wir verwenden sie zum Zeichnen eines Kreises:

Code kopieren

Der Code lautet wie folgt:

ctx.arc(300 25,100 20,20,0,Math.PI*2);
ctx.Stroke()
ctx.fill();

Dieser Bogen ist derselbe wie rect, er zeichnet auch einen Pfad und die Füllung oder der Strich muss später vervollständigt werden.
Es sollte jedoch beachtet werden, dass die Positionsbeurteilung eines Kreises anders ist als die eines Rechtecks. Wir verwenden die obere linke Ecke des Rechtecks ​​als Ausgangspunkt, um seine Position zu bestimmen, aber normalerweise verwenden wir den Mittelpunkt des Kreises, um die Position des Kreises zu bestimmen.
Wenn Sie eine Reihe horizontal und vertikal zentrierter Rechtecke und Kreise zeichnen möchten, müssen Sie daran denken, den Startpunkt des Rechtecks ​​nicht als Startpunkt des Kreises zu betrachten – der Startpunkt des Kreises ist der Mittelpunkt von der Kreis!

Vergessen Sie es, lassen Sie mich Ihnen die aktuelle Formel geben. Für ausgerichtete Kreise und Rechtecke sind die Koordinaten des Kreismittelpunkts = die Koordinaten des Rechtecks ​​und die halbe Breite und Höhe des Rechtecks.
Das heißt, Kreismittelpunkt x = Rechteck x Rechteckbreite/2, Kreis y = Rechteck y Rechteckhöhe/2. Auf diese Weise sind sie absolut ausgerichtet.
Auch wenn der Bogen nicht so einfach zu verwenden ist wie die Methode zum direkten Zeichnen eines Kreises – die Methode, die ich mir vorgestellt habe, um einen Kreis direkt zu zeichnen, erfordert nur drei Parameter, nämlich die Koordinaten des Mittelpunkts des Kreises und den Radius –, aber der Bogen kann verwendet werden Zeichnen Sie nicht nur Kreise, sondern auch Halbkreise usw., sodass die Funktion leistungsfähiger ist und Sie damit auskommen können.
Da es einen Kreis gibt, sollte es auch eine Ellipse geben, aber es gibt nicht einmal eine reguläre Funktion zum Zeichnen eines Kreises auf der Leinwand, geschweige denn einer Ellipse. Daher muss das Zeichnen einer Ellipse mit anderen Methoden simuliert werden. Dies ist komplizierter, daher überlasse ich es später.