Cerchio Canvas HTML

Esempio

Il tuo browser non supporta il tag HTML5 canvas.
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();

Prova personalmente

Disegna un cerchio

Per disegnare un cerchio sul canvas, utilizzare i seguenti metodi:

  • beginPath() - Inizia il percorso
  • arc(x,y,r,start,end) - Definisce il cerchio
  • stroke() - Disegna

arc(x,y,r,start,end) - Crea un arco (curva).

Per creare un cerchio, imposta l'angolo di inizio su 0 e l'angolo di fine su 2 * Math.PI.

Le variabili x e y definiscono le coordinate del centro del cerchio.

Il parametro r definisce il raggio del cerchio.

Vedere anche:

Manuale completo di Canvas di CodeW3C.com