Metoda arc

Metoda arc kreslí oblouk se středem v zadaném bodě a zadaným poloměrem. Viditelným se tento oblouk stane pouze při použití metod stroke nebo fill. V prvním případě bude obrys, ve druhém - vyplněný tvar.

Poslední volitelný parametr reguluje směr kreslení. Přijímá hodnotu true nebo false. Hodnota true kreslí oblouk ve směru hodinových ručiček, zatímco hodnota false - proti směru hodinových ručiček (výchozí).

Při kreslení lze zadat počáteční a koncový úhel. Tyto úhly se měří v radiánech, ne ve stupních. Pro převod stupňů na radiány můžete použít následující funkci:

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

Syntaxe

kontext.arc(x, y, poloměr, počáteční úhel, koncový úhel, [směr = false]);

Příklad

Nakresleme kružnici:

<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;
}

Příklad

Nakresleme polovinu kružnice:

<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;
}

Příklad

Nakresleme polovinu kruhu (vyplníme obrys pomocí 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;
}

Viz také

metoda rect,
která kreslí obdélník