Kreslení kružnic pomocí canvas v JavaScriptu

Metoda arc kreslí oblouk se středem v určitém bodě. Přijímá následující parametry: x, y, poloměr r, počáteční úhel startAngle, koncový úhel endAngle, kreslit po nebo proti směru hodinových ručiček direction.

Parametr direction přijímá následující hodnoty: true znamená kreslit po směru hodinových ručiček, false proti směru (výchozí).

Úhly v metodě arc se měří v radiánech, ne ve stupních. Pro převod stupňů na radiány můžete použít následující funkci:

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

Nakreslíme kružnici

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

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

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

Результат:

Nakreslíme polovinu kružnice

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

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

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

Результат:

Nakreslíme polovinu kruhu

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

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

ctx.arc(100, 100, 75, 0, getRadians(180));
ctx.fill(); // vyplníme obrys

Результат:

Praktické úlohy