Manuale di riferimento HTML

Completo della guida HTML

Metodo arc() su HTML canvas

Il metodo arc() è una funzione di percorso di arco di Canvas 2D API. Il percorso dell'arco ha il centro in (x, y), il raggio r e parte dall'angolo di inizio specificato clockwise (per default) e termina all'angolo di fine.

Manuale di riferimento per HTML canvas

Esempio online

Disegna un cerchio:

Esempio

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Utilizzo del metodo arc() su HTML canvas - Guida di base (oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
Il tuo browser non supporta il tag HTML5 canvas.
</canvas>
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);
ctx.stroke();
</script>　
</body>
</html>

Testa per vedere ‹/›

Compatibilità del browser

IEFirefoxOperaChromeSafari

Internet Explorer 9, Firefox, Opera, Chrome e Safari supportano arc() Metodo.

Attenzione:Internet Explorer 8 e le versioni precedenti non supportano l'elemento <canvas>.

Definizione e uso

Il metodo arc() crea un arco/curva (usato per creare cerchi o parti di cerchi).

Suggerimento:Se si crea un cerchio utilizzando arc(), eseguire le seguenti operazioni: impostare l'angolo di inizio su 0 e l'angolo di fine su 2 * Math.PI.

Suggerimento:Utilizzare stroke() ofill() Il metodo disegna l'arco effettivo sul canvas.

Centro:

arc(100,75,50,0*Math.PI,1.5*Math.PI)

Angolo di inizio:

arc(100,75,50,0,1.5*Math.PI)

Angolo di fine:

arc(100,75,50,0*Math.PI,1.5*Math.PI)

Sintassi JavaScript:	context.arc(x,y,r,sAngle,eAngle,antiorario);

Valore del parametro

Parametro	Descrizione
x	Coordinata x del centro del cerchio.
y	Coordinata y del centro del cerchio.
r	Raggio del cerchio.
sAngle	Angolo di inizio, espresso in radianti (la posizione di tre ore del cerchio è 0 gradi).
eAngle	Angolo di fine, espresso in radianti.
antiorario	Opzionale. Specifica se disegnare in senso orario o antiorario. False = orario, true = antiorario.

Manuale di riferimento per HTML canvas

HTML: <template> etichetta