Αλλαγή χρώματος γραμμής στο canvas σε JavaScript
Ας μάθουμε τώρα πώς να αλλάζουμε το χρώμα του περιγράμματος
και του γεμίσματος. Για αυτό υπάρχουν οι ακόλουθες ιδιότητες:
η ιδιότητα strokeStyle ορίζει
το χρώμα του περιγράμματος, ενώ η ιδιότητα fillStyle
- το χρώμα του γεμίσματος. Τα χρώματα ορίζονται στη συνήθη
CSS
μορφή.
Παράδειγμα
Ας σχεδιάσουμε ένα περίγραμμα χρησιμοποιώντας την rect
και ας το βάψουμε με κόκκινο χρώμα:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.rect(50, 50, 100, 100);
ctx.strokeStyle = 'red';
ctx.stroke();
:
Παράδειγμα
Ας σχεδιάσουμε ένα τετραγωνάκι χρησιμοποιώντας την rect
και ας το γεμίσουμε με πράσινο χρώμα:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.rect(50, 50, 100, 100);
ctx.fillStyle = 'green';
ctx.fill();
:
Παρατήρηση
Σημαντικό: όταν ορίζετε την strokeStyle
ή την fillStyle, η νέα τιμή θα εφαρμοστεί
σε όλα τα σχήματα που θα σχεδιαστούν
από αυτή τη στιγμή και μετά. Για κάθε σχήμα για το οποίο
χρειάζεστε διαφορετικό χρώμα, πρέπει να ξαναορίσετε
την τιμή της fillStyle ή της strokeStyle.
