Σχεδίαση κύκλων μέσω canvas σε JavaScript
Η επόμενη μέθοδος arc σχεδιάζει ένα τόξο με
κέντρο σε ένα συγκεκριμένο σημείο. Δέχεται τις ακόλουθες
παραμέτρους: x, y, ακτίνα r,
αρχική γωνία startAngle, τελική
γωνία endAngle, σχεδίαση με ή αντίθετα από
τη φορά των δεικτών του ρολογιού direction.
Η παράμετρος direction δέχεται τις ακόλουθες τιμές: true κάνει
τη σχεδίαση με τη φορά των δεικτών του ρολογιού, false αντίθετα από τη φορά (προεπιλογή).
Οι γωνίες στη μέθοδο arc μετρώνται σε ακτίνια,
όχι σε μοίρες. Για τη μετατροπή μοιρών σε ακτίνια
μπορείτε να χρησιμοποιήσετε την ακόλουθη συνάρτηση:
function getRadians(degrees) {
return (Math.PI / 180) * degrees;
}
Ας σχεδιάσουμε έναν κύκλο
<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();
:
Ας σχεδιάσουμε έναν ημικύκλιο
<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();
:
Ας σχεδιάσουμε έναν ημικύκλιο γεμάτο
<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(); // θα γεμίσουμε το περίγραμμα
:
