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:
function getRadians(degrees) {
return (Math.PI / 180) * degrees;
}
Rajzoljunk egy kört
<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();
:
Rajzoljunk egy félkört
<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();
:
Rajzoljunk egy félkör alakú kitöltött területet
<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(); // kitöltjük a kontúrt
:
