Canvas arcTo() Methode

Canvas-Referenzhandbuch

Definition und Verwendung

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

Hinweis:Verwenden Sie stroke() Diese Methode zeichnet präzise Bögen auf dem Canvas.

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);           // Startpunkt erstellen
ctx.lineTo(100,20);          // Horizontale Linie erstellen
ctx.arcTo(150,20,150,70,50); // Bogenshape erstellen
ctx.lineTo(150,120);         // Vertikale Linie erstellen
ctx.stroke();                // Zeichnen durchführen

Versuchen Sie es selbst

Syntax

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

Parameterwert

Parameter Beschreibung
x1 Die x-Koordinate des Anfangspunkts des Bogens
y1 Die y-Koordinate des Anfangspunkts des Bogens
x2 Die 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 das Attribut 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.

Canvas-Referenzhandbuch