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 StrokerectFillRect 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. LINETONatürlich können Sie auch 4 Linesto -Zeichnen eines Rechtecks wie mein Tutorial für Zeichnungslinien 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 Canvas bereits erwähnt, ein 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 würde Ihnen jetzt besser eine Formel geben, 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 vorgestellt habe, erfordert nur 3 Parameter, nämlich die Mittelkoordinaten des Kreises, dh der Radius - aber ARC kann nicht nur Kreise zeichnen, sondern auch Halbkreis zeichnen, sodass 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.