Rysowanie okręgów za pomocą canvas w JavaScript

Następująca metoda arc rysuje łuk o środku w pewnym punkcie. Przyjmuje następujące parametry: x, y, promień r, kąt początkowy startAngle, kąt końcowy endAngle, rysowanie zgodnie lub przeciwnie do ruchu wskazówek zegara direction.

Parametr direction przyjmuje następujące wartości: true powoduje rysowanie zgodnie z ruchem wskazówek zegara, false przeciwnie do ruchu wskazówek zegara (domyślnie).

Przy czym kąty w metodzie arc mierzy się w radianach, nie w stopniach. Aby przeliczyć stopnie na radiany możesz użyć następującej funkcji:

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

Narysujmy okrąg

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();

Результат:

Narysujmy połowę okręgu

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();

Результат:

Narysujmy półkole

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(); // wypełnijmy kontur

Результат:

Zadania praktyczne