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:
function getRadians(degrees) {
return (Math.PI / 180) * degrees;
}
Nakreslíme kružnici
<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();
:
Nakreslíme polovinu kružnice
<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();
:
Nakreslíme polovinu kruhu
<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(); // vyplníme obrys
:
