Manuale di riferimento HTML

Completo elenco dei tag HTML

Metodo arcTo() del canvas HTML

arcTo() è una funzione di Canvas 2D API che disegna un percorso di arco tra due tangenti utilizzando un punto di controllo e un raggio. La retta che collega il punto corrente di traccia (l'ultimo moveTo o lineTo, ecc.) con il primo punto di controllo, e la retta che collega il primo punto di controllo con il secondo punto di controllo, serve come tangenti di un cerchio specificato di raggio, disegnando il percorso di arco tra le due tangenti.

Manuale di riferimento HTML canvas

Esempio online

Creare un arco tra due tangenti sullo schermo:

JavaScript:

Esempio

!DOCTYPE　html>
<html>
<head>　
<meta　charset="utf-8">　
<title>基础教程网(oldtoolbag.com)</title>　
</head>
<body>
<script>
var　c=document.getElementById("myCanvas");
var　ctx=c.getContext("2d");
ctx.beginPath();　
ctx.moveTo(20,20);　//　创建起始点
ctx.lineTo(100,20);　//　创建水平线　
ctx.arcTo(150,20,150,70,50);　//　创建弧
ctx.lineTo(150,120);　//　创建垂直线
ctx.stroke();　　　　　　　　　　　　　　　　//　Disegna
</script>
</body>
</html>

Testa per vedere ‹/›

Compatibilità del browser

IEFirefoxOperaChromeSafari

Definizione e uso

Il metodo arcTo() crea un arco/curva tra due linee di taglio sullo schermo.

Suggerimento:Utilizzare stroke() Il metodo disegna un arco esatto sullo schermo.

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

Valore del parametro

Parametro	Descrizione
x1	L'ascissa dell'intersezione delle due linee di taglio.
y1	L'ordinata dell'intersezione delle due linee di taglio.
x2	L'ascissa di un punto sulla seconda linea di taglio.
y2	L'ordinata di un punto sulla seconda linea di taglio.
r	Il raggio dell'arco.

L'ascissa e l'ordinata di qualsiasi punto sulla prima linea sono la posizione del punto precedente, nel presente esempio 100,20I punti (x1,y1),(x2,y2),(100,20) determinano la posizione di due linee e la posizione dell'arco è determinata dal raggio.

Manuale di riferimento HTML canvas

HTML: <template> etichetta