HTML-Leinwand -arcTo()- Methode

❮ HTML-Canvas-Referenz

Beispiel

Erstellen Sie einen Bogen zwischen zwei Tangenten auf der Leinwand:

Ihr Browser unterstützt den HTML5-Canvastag nicht.

JavaScript:

var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.moveTo(20, 20);           // Create a starting point
ctx.lineTo(100, 20);          // Create a horizontal line
ctx.arcTo(150, 20, 150, 70, 50); // Create an arc
ctx.lineTo(150, 120);         // Continue with vertical line
ctx.stroke();                // Draw it

Browser-Unterstützung

Die Zahlen in der Tabelle geben die erste Browserversion an, die das Verfahren vollständig unterstützt.

Method
arcTo() Yes 9.0 Yes Yes No

Definition und Verwendung

Die Methode arcTo() erstellt einen Bogen/eine Kurve zwischen zwei Tangenten auf der Leinwand.

Canvas arcto()-Diagramm

Tipp: Verwenden Sie die Methode stroke() , um den Bogen tatsächlich auf der Leinwand zu zeichnen.

JavaScript-Syntax: Kontext .arcTo( x1,y1,x2,y2,r );

Parameterwerte

Parameter Description Play it
x1 The x-coordinate of the first tangent
y1 The y-coordinate of the first tangent
x2 The x-coordinate of the second tangent
y2 The y-coordinate of the second tangent
r The radius of the arc

❮ HTML-Canvas-Referenz