HTML Canvas Cirkel

Voorbeeld

Uw browser ondersteunt de HTML5 canvas tag niet. 
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();

Probeer het zelf uit

Teken een cirkel

Om een cirkel te tekenen op het canvas, gebruik de volgende methoden:

  • beginPath() - Begin pad
  • arc(x,y,r,start,eind) - Definieer de cirkel
  • stroke() - Tekenen

arc(x,y,r,start,eind) - Maak een boog (kromme).

Om een cirkel te maken, stel de beginhoek in op 0 en de eindhoek in op 2 * Math.PI.

x en y parameters definiëren de coördinaten van het midden van de cirkel.

De r parameter definieert de straal van de cirkel.

Zie ook:

Volledige Canvas Referentiemanual van CodeW3C.com