Μέθοδος arc

Η μέθοδος arc σχεδιάζει ένα τόξο με κέντρο σε ένα δεδομένο σημείο και δεδομένη ακτίνα. Αυτό το τόξο θα γίνει ορατό μόνο εάν εφαρμοστούν οι μέθοδοι stroke ή fill. Στην πρώτη περίπτωση θα εμφανιστεί το περίγραμμα, και στη δεύτερη - η γεμισμένη φιγούρα.

Η τελευταία προαιρετική παράμετρος ρυθμίζει την κατεύθυνση σχεδίασης. Δέχεται την τιμή true ή false. Η τιμή true σχεδιάζει το τόξο δεξιόστροφα, ενώ η τιμή false - αριστερόστροφα (προεπιλογή).

Μπορείτε να ορίσετε την αρχική και την τελική γωνία κατά τη σχεδίαση. Αυτές οι γωνίες μετρώνται σε ακτίνια, όχι σε μοίρες. Για τη μετατροπή μοιρών σε ακτίνια μπορείτε να χρησιμοποιήσετε την ακόλουθη συνάρτηση:

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

Σύνταξη

context.arc(x, y, ακτίνα, αρχική γωνία, τελική γωνία, [κατεύθυνση = false]);

Παράδειγμα

Ας σχεδιάσουμε μια περιφέρεια:

<canvas id="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();

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

Παράδειγμα

Ας σχεδιάσουμε ένα μισό κύκλου:

<canvas id="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();

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

Παράδειγμα

Ας σχεδιάσουμε έναν ημικύκλιο (για να γεμίσουμε το περίγραμμα χρησιμοποιώντας την fill):

<canvas id="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();

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

Δείτε επίσης

η μέθοδος rect,
που σχεδιάζει ένα ορθογώνιο