HTML canvas arcTo() Methode

HTML5 Canvas Referenzhandbuch

Definition und Verwendung

arcTo() Die Methode erstellt auf dem Canvas einen Bogen/Curven zwischen zwei Tangenten.

Hinweis:Verwenden Sie stroke() Die Methode zeichnet auf dem Canvas einen präzisen Bogen.

Beispiel

Erstellen Sie auf dem Canvas einen Bogen zwischen zwei Tangenten:

Ihr Browser unterstützt das HTML5 canvas-Tag nicht.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.beginPath();
ctx.moveTo(20,20);           // Erstellen Sie den Ausgangspunkt
ctx.lineTo(100,20);          // Erstellen Sie eine horizontale Linie
ctx.arcTo(150,20,150,70,50); // Bogengestaltung erstellen
ctx.lineTo(150,120);         // Vertikale Linie erstellen
ctx.stroke();                // Zeichnen durchführen

Probieren Sie es selbst aus

Syntax

context.fillRect(x1,y1,x2,y2,r);

Parameterwert

Parameter Beschreibung
x1 x-Koordinate des Anfangspunkts des Bogens.
y1 y-Koordinate des Anfangspunkts des Bogens.
x2 x-Koordinate des Endpunkts des Bogens.
y2 y-Koordinate des Endpunkts des Bogens.
r Radius des Bogens.

Browser-Unterstützung

Die in der Tabelle genannten Zahlen beziehen sich auf die erste Browser-Version, die diese Eigenschaft vollständig unterstützt.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Anmerkung:Internet Explorer 8 und frühere Versionen unterstützen das <canvas>-Element nicht.

HTML5 Canvas Referenzhandbuch