Metoda arc

Metoda arc riše lok z določenim središčem in polmerom. Lok postane viden šele po uporabi metod stroke ali fill. V prvem primeru dobimo obris, v drugem pa zapolnjeno obliko.

Zadnji neobvezni parameter določa smer risanja. Sprejme vrednost true ali false. Vrednost true riše lok v smeri urinega kazalca, vrednost false pa v nasprotni smeri (privzeto).

Pri risanju lahko določimo začetni in končni kot. Ti koti so izraženi v radianih, ne v stopinjah. Za pretvorbo stopinj v radiane lahko uporabite naslednjo funkcijo:

function getRadians(degrees) {
	return (Math.PI / 180) * degrees;
}

Sintaksa

kontekst.arc(x, y, polmer, začetni kot, končni kot, [smer = false]);

Primer

Narišimo krožnico:

<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

let canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.arc(100, 100, 75, 0, getRadians(360));
ctx.stroke();

function getRadians(degrees) {
	return (Math.PI / 180) * degrees;
}

Primer

Narišimo polovično krožnico:

<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

let canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.arc(100, 100, 75, 0, getRadians(180));
ctx.stroke();

function getRadians(degrees) {
	return (Math.PI / 180) * degrees;
}

Primer

Narišimo polovični krog (zapolnimo obris z fill):

<canvas id="canvas" width="200" height="200" style="background: #f4f4f4;"></canvas>

let canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');

ctx.arc(100, 100, 75, 0, getRadians(180));
ctx.fill();

function getRadians(degrees) {
	return (Math.PI / 180) * degrees;
}

Glejte tudi

metoda rect,
ki riše pravokotnik