Im vorherigen Artikel habe ich über die Methoden zum Zeichnen von Rechtecken und Kreisen gesprochen. Sie alle haben native Leinwandzeichnungsfunktionen, die abgeschlossen werden können. Das in diesem Artikel erwähnte abgerundete Rechteck kann nur mit anderen Methoden simuliert werden.
Für ein normales, abgerundetes Rechteck nehmen wir zunächst an, dass die abgerundeten Ecken seiner vier Ecken gleich sind - da dies leichter zu zeichnen ist. Wir verwenden die Fähigkeit, die Oberfläche in Linien zu teilen, und es ist leicht zu ermitteln, dass das abgerundete Rechteck tatsächlich aus 4 hakenähnlichen Kurven besteht.
Wenn Sie von Hooks sprechen: Wenn Sie meinen Artikel in der Einführung von Arcto gelesen haben, können Sie sofort verstehen, dass diese Art von Grafiken mit ARCTO gezeichnet werden kann.
Als ich über Arcto sprach, erwähnte ich, dass Arcto ein Merkmal hat, dass seine zweite Tangentenverlängerung die von ihm gezogenen Linien nicht beeinflusst (im letzten Teil oben), was uns auch für uns bequem ist, abgerundete Rechtecke zu zeichnen, ohne sich um eine Verformung zu sorgen.
Das Folgende ist die Methode, um abgerundete Rechtecke zu zeichnen, die ich auf einer fremden Website gefunden habe, die am effizientesten sein sollte.
// rundes Rechteck
CanvasrenderingContext2d.Prototype.RoundRect = Funktion (x, y, w, h, r) {
if (w & lt; 2 * r) r = w / 2;
if (h & lt; 2 * r) r = h / 2;
this.beginPath ();
this.moveto (x+r, y);
this.arcto (x+w, y, x+w, y+h, r);
this.arcto (x+w, y+h, x, y+h, r);
this.arcto (x, y+h, x, y, r);
this.arcto (x, y, x+w, y, r);
// this.arcto (x+r, y);
this.closepath ();
gib dies zurück;
}
Die Parameter dieser Funktion sind X -Koordinate, Y -Koordinate, Breite, Höhe und abgerundete Eckradius. Achten Sie besonders auf den letzten Parameter - abgerundeter Eckradius.
Diese Methode verwendet Arcto 4 Mal, um ein abgerundetes Rechteck zu zeichnen, und die Bögen jeder Ecke sind gleich. Der Koordinatenpunkt dieses abgerundeten Rechtecks ist auch die gleiche obere linke Ecke wie das Rechteck, aber sein Ausgangspunkt ist nicht hier, sondern:
Sie können eine der Linien entfernen und sehen, wie diese Methode ist.
Natürlich möchte ich Sie daran erinnern, dass Sie, egal in welcher Form Sie zeichnen, sich daran erinnern müssen, den Weg zu schließen - Gymnastik, um nicht versteckte Gefahren zu hinterlassen.
Diese Methode hat eine Rückgabe am Ende, mit der Sie die Kettensyntax verwenden können, z. B.:
Ctx.RoundRect (200.300.200.120,20) .stroke (); Sie können es entfernen, wenn Sie es nicht brauchen.
Wenn Sie den contrenderingContext2D -Prototyp nicht erweitern möchten, können Sie diese Methode auch verwenden, um eine andere Funktion zu erstellen.
Als ich diese Funktion entdeckte, wusste ich nicht einmal, was Arcto war, also erinnerte ich mich nicht, auf welcher Website ich sie gefunden habe. Wie auch immer, es war nicht original von mir. Vielen Dank an den Autor.
Im vorherigen Artikel habe ich immer betont, dass jede Ecke des abgerundeten Rechtecks, das in dieser Methode gezogen wurde, konsistent ist, da das Randradius in CSS3 leicht abgerundete Rechtecke mit inkonsistenten Bögen jeder Ecke oder sogar jeder Ecke zeichnen kann. Ich werde einen Weg finden, unregelmäßige, abgerundete Rechtecke in Leinwand zu zeichnen, aber ich persönlich denke, dass es ziemlich schwierig ist.