HTML Canvas pyöreä

Esimerkki

Selaimesi ei tue HTML5 canvas -tagia. 
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.beginPath();
ctx.arc(95, 50, 40, 0, 2 * Math.PI);
ctx.stroke();

Kokeile itse

Piirrä pyöreä

Piirrä pyöreä käyttämällä seuraavia menetelmiä:

  • beginPath() - aloita polku
  • arc(x,y,r,start,end) - Määritä pyöreä
  • stroke() - piirrä

arc(x,y,r,start,end) - Luo kaari (kurvi).

Luo pyöreä asettamalla alkukulma 0 ja loppukulma 2 * Math.PI.

x ja y parametrit määrittävät ytimen koordinaatit.

r-parametri määrittää pyörän säteen.

Katso myös:

CodeW3C.comin täydellinen Canvas viittausopas