Kommentar: In diesem Artikel wird über die Methode zum Zeichnen von Rechtecken und Kreisen in Leinwand gesprochen, sie gehören zu grundlegenden Grafiken. Natürlich gibt es mehr als nur sie in grundlegenden Grafiken, aber in Leinwand erfordert das Zeichnen von Rechtecken und Kreisen keine anderen Methoden, um zu simulieren. Interessierte Freunde können darüber lernen
In diesem Artikel wird über die Methode zum Zeichnen von Rechtecken und Kreisen in Leinwand gesprochen, sie gehören zu grundlegenden Grafiken. Natürlich gibt es mehr als nur sie in grundlegenden Grafiken, aber in Leinwand erfordert das Zeichnen von Rechtecken und Kreisen keine anderen Simulationen.Leinwand zeichnen Rechtecke
1. Fillrect und Strokerect
FillRect kann ein Rechteck direkt füllen, und der Füllstil ist der Stil, den Sie derzeit festlegen. In ähnlicher Weise soll Strokerect ein Rechteck direkt streicheln
Ihre Parameter sind wiederum konsistent (Startpunkt X -Koordinate, Startpunkt y, Rechteckbreite, Rechteckhöhe). Der Startpunkt hier bezieht sich auf den Punkt in der oberen linken Ecke des Rechtecks.
Wir verwenden sie normalerweise, um einfache Dinge zu tun, und sie können nur einfache Dinge tun. Warum? Weil die Wörter, die die Grafiken, die sie zeichnen, keine Wege haben, direkt herauskamen.
Wenn Sie beispielsweise zuerst ein Rechteck mit Fillrect füllen, möchten Sie das Rechteck streicheln. Wenn Sie Stroke () verwenden, gibt es keinen Einfluss, denn obwohl zu diesem Zeitpunkt ein Rechteck gibt, gibt es keinen Weg.
Wenn Sie bestrebt sind, dieses Rechteck zu streicheln, können Sie Strokerect () verwenden, um ein Rechteck an derselben Position zu streicheln - aber sie sind tatsächlich unabhängig, nur überlappende Positionen.
Ctx.FillRect (200.100,50,40);
Ctx.Strokerect (200.100,50,40);
Wenn wir ein Rechteck wollen, das gefüllt und gestreichelt ist, wird es zweifellos umständlich sein, Fillrect und Strokerect gleichzeitig zu verwenden. In diesem Fall verwenden wir also normalerweise die folgende Methode.
2, rect
Die Parameter von RECT unterscheiden sich nicht von Fillrect und Strokerect. Der Unterschied besteht darin, dass sie nur den Weg zeichnen und Sie den Schlaganfall vervollständigen oder sich später füllen müssen.
CTX.RECT (300.100,50,40);
ctx.stroke ()
ctx.fill ();
Was sind die Vorteile davon? Im vorherigen Artikel erwähnte ich, dass Füllung oder Schlaganfall viele Ressourcen konsumiert, sodass wir häufig (z. B. Schleifen) Hunderte von Pfaden gleichzeitig zeichnen und dann streicheln oder füllen müssen. Zeichnen Sie zu diesem Zeitpunkt den Pfad RECT und füllen Sie ihn dann erneut aus, was das Problem der Füllung und Strokec -Füllung oder eines Schlaganfalls jedes Mal vermeidet.
3. LINETO
Natürlich können Sie auch 4 Linesto -Zeichnen eines Rechtecks wie mein Zeichnungs -Tutorial verwenden. Dies ist jedoch unnötig. Bitte lesen Sie diesen Artikel für Einzelheiten.
Canvas -Zeichnenkreis
Der Himmel hat keine Augen. Tatsächlich hat Canvas keine reale Funktion, die direkt einen Kreis zeichnen kann. Was er zeichnet, ist eigentlich ein 360-Grad-Bogen, der wie ein Kreis aussieht.
Wir haben die Funktion von Leinwand erwähnt, einen Bogen zu zeichnen, dh Arc. Wir verwenden es, um einen Kreis zu zeichnen:
ctx.arc (300+25.100+20,20,0, Math.pi*2);
ctx.stroke ()
ctx.fill ();
Dieser Bogen ist der gleiche Rekt und der Pfad wird gezogen, und der Füllung oder der Hub muss später abgeschlossen werden.
Es ist jedoch zu beachten, dass sich das Positionsurteil eines Kreises von dem eines Rechtecks unterscheidet. Wir bestimmen seine Position mit der oberen linken Ecke des Rechtecks als Ausgangspunkt, bestimmen jedoch normalerweise die Position des Kreises mit der Mitte des Kreises.
Wenn Sie eine Reihe von Rechtecken und Kreisen zeichnen möchten, die horizontal und vertikal zentriert sind, müssen Sie sich daran erinnern, den Ausgangspunkt des Rechtecks nicht als Ausgangspunkt des Kreises zu betrachten - der Ausgangspunkt des Kreises ist die Mitte des Kreises!
Vergessen Sie es, ich gebe Ihnen jetzt eine Formel, ausgerichtete Kreise und Rechtecke, Koordinaten der Mitte des Kreises = Koordinaten der Rechtecke + Hälfte der Breite und Höhe der Rechtecke.
Das heißt, die Mitte des Kreises x = Rechteck x + Rechteckbreite/2 und der Kreis y = Rechteck y + Rechteckhöhe/2. Auf diese Weise sind sie absolut ausgerichtet.
Obwohl ARC nicht so einfach zu verwenden ist wie eine Methode zum direkten Zeichnen von Kreisen - die Methode zum direkten Zeichnen von Kreisen, die ich mir nur vorgestellt habe, erfordert nur 3 Parameter, nämlich die Zentralkoordinaten, dh der Radius - aber ARC kann nicht nur Kreise zeichnen, sondern auch semikiriere zeichnen, damit er leistungsfähiger und verwendet werden kann.
Da es einen Kreis gibt, sollte es eine Ellipse geben, aber es gibt nicht einmal eine reguläre Funktion, um einen Kreis in Leinwand zu zeichnen, geschweige denn eine Ellipse. Daher muss das Zeichnen von Ellipsen mit anderen Methoden simuliert werden. Das ist ziemlich kompliziert, also werde ich es bis zum nächsten Schritt überlassen.