HTML Referenzhandbuch

Vollständiges Verzeichnis der HTML-Tags

HTML canvas arcTo() Methode

arcTo() ist eine Canvas 2D API zeichnet den Bogenpfad, basierend auf dem Kontrollpunkt und dem Radius, und verwendet den aktuellen Strichpunkt (den Endpunkt des vorherigen moveTo oder lineTo usw.). Basierend auf dem aktuellen Strichpunkt und dem gegebenen Kontrollpunkt1Verbindende Geraden, dem Kontrollpunkt1und dem Kontrollpunkt2Verbindende Geraden, die als Tangenten eines mit angegebenem Radius umschließenden Kreises dienen, zeichnen Sie den Bogenpfad zwischen den beiden Tangenten.

HTML canvas reference manual

Online-Beispiel

Erstellen Sie auf dem Canvas einen Bogen zwischen zwei Tangenten:

JavaScript：

Beispiel

!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Grundlagen-Tutorial-Website(oldtoolbag.com)</title>　
</head>
<body>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();　
ctx.moveTo(20,20);　　　　　　　　　　　//　Erstellen Sie den Startpunkt
ctx.lineTo(100,20);　　　　　　　　　　//　Create a horizontal line　
ctx.arcTo(150,20,150,70,50);　//　Create an arc
ctx.lineTo(150,120);　　　　　　　　　//　Create a vertical line
ctx.stroke();　　　　　　　　　　　　　　　　//　Draw it
</script>
</body>
</html>

Test and see ‹/›

Browser compatibility

IEFirefoxOperaChromeSafari

Definition and usage

The arcTo() method creates an arc between two tangents on the canvas/curve.

Hint:Please use stroke() Method to draw an exact arc on the canvas.

JavaScript syntax:	context.arcTo(x1,y1,x2,y2,r);

Parameter value

Parameter	Description
x1	x-coordinate of the intersection point of the two tangents.
y1	y-coordinate of the intersection point of the two tangents.
x2	x-coordinate of a point on the second tangent line.
y2	y-coordinate of a point on the second tangent line.
r	radius of the arc.

where the coordinates of any point on the first line are the position of the last point, in this example: 100,20. By (x1,y1),(x2,y2,(100,20) Three points determine the position of two lines, and the position of the arc is determined by the radius.

HTML canvas reference manual

HTML: <template> Tag