Körök rajzolása canvas segítségével JavaScriptben

A következő metódus, a arc egy ívet rajzol egy adott pont középpontjával. A következő paramétereket fogadja el: x, y, sugár r, kezdőszög startAngle, végszög endAngle, rajzolás az óramutató járásával megegyező vagy ellentétes irányban direction.

A direction paraméter a következő értékeket fogadja el: true az óramutató járásával megegyező irányt, false az óramutató járásával ellentétes irányt jelenti (alapértelmezett).

Ugyanakkor a arc metódus szögeit radiánban méri, nem fokban. A fokok radiánná alakításához használhatja a következő függvényt:

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

Rajzoljunk egy kört

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

Результат:

Rajzoljunk egy félkört

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

Результат:

Rajzoljunk egy félkör alakú kitöltött területet

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(); // kitöltjük a kontúrt

Результат:

Gyakorlati feladatok