Free Trial

Safari Books Online is a digital library providing on-demand subscription access to thousands of learning resources.


  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL
Help

Referenz für clientseitiges JavaScript > CanvasRenderingContext2D.arcTo( )

CanvasRenderingContext2D.arcTo( )Fügt dem momentanen Subpfad einen Kreisbogen unter Verwendung von Tangentenpunkten und eines Radius hinzu

Überblick

void arcTo(float x1, float y1,
      float x2, float y2,
      float radius
)

Argumente


x1, y1

Die Koordinaten des Punktes P1.


x2, y2

Die Koordinaten des Punktes P2.


radius

Der Radius des Kreises, der den Kreisbogen definiert.

Beschreibung

Diese Methode fügt dem momentanen Subpfad einen Kreisbogen hinzu, beschreibt diesen Kreisbogen aber ganz anders als die arc( )-Methode. Der Kreisbogen, der zum Pfad hinzugefügt wird, ist ein Kreissegment mit dem angegebenen radius. Der Kreisbogen hat einen Punkt, der die Linie zwischen der momentanen Position und P1 tangiert, und einen Punkt, der die Linie von P1 nach P2 tangiert. Der Kreisbogen beginnt und endet an diesen zwei Tangentenpunkten und wird in der Richtung gezeichnet, die diese zwei Punkte mit dem kürzesten Kreisbogen verbindet.

Bei vielen Anwendungen beginnt der Kreisbogen an der momentanen Position und endet bei P2, was aber nicht immer der Fall ist. Wenn die derzeitige Position nicht mit dem Startpunkt des Kreisbogens übereinstimmt, fügt diese Methode eine gerade Linie zwischen der momentanen Position und der Startposition des Kreisbogens ein. Diese Methode belässt die momentane Position auf dem Endpunkt des Kreisbogens.

Beispiel

Mit dem folgenden Code können Sie die rechte, obere Ecke eines Rechtecks zeichnen und ihr eine abgerundete Ecke geben:

c.moveTo(10, 10);              // oben links beginnen
c.lineTo(90, 10)               // horizontale Linie bis zum Beginn der abgerundeten Ecke
c.arcTo(100, 10, 100, 20, 10); // abgerundete Ecke
c.lineTo(100, 100);            // senkrechte Linie nach rechts unten

					  

Fehler

Firefox 1.5 unterstützt diese Methode nicht.

Siehe auch

CanvasRenderingContext2D.arc( )

  • Safari Books Online
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint