Αλλαγή χρώματος γραμμής στο canvas σε JavaScript

Ας μάθουμε τώρα πώς να αλλάζουμε το χρώμα του περιγράμματος και του γεμίσματος. Για αυτό υπάρχουν οι ακόλουθες ιδιότητες: η ιδιότητα strokeStyle ορίζει το χρώμα του περιγράμματος, ενώ η ιδιότητα fillStyle - το χρώμα του γεμίσματος. Τα χρώματα ορίζονται στη συνήθη CSS μορφή.

Παράδειγμα

Ας σχεδιάσουμε ένα περίγραμμα χρησιμοποιώντας την rect και ας το βάψουμε με κόκκινο χρώμα:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.rect(50, 50, 100, 100);
ctx.strokeStyle = 'red';
ctx.stroke();

Результат:

Παράδειγμα

Ας σχεδιάσουμε ένα τετραγωνάκι χρησιμοποιώντας την rect και ας το γεμίσουμε με πράσινο χρώμα:

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.rect(50, 50, 100, 100);
ctx.fillStyle = 'green';
ctx.fill();

Результат:

Παρατήρηση

Σημαντικό: όταν ορίζετε την strokeStyle ή την fillStyle, η νέα τιμή θα εφαρμοστεί σε όλα τα σχήματα που θα σχεδιαστούν από αυτή τη στιγμή και μετά. Για κάθε σχήμα για το οποίο χρειάζεστε διαφορετικό χρώμα, πρέπει να ξαναορίσετε την τιμή της fillStyle ή της strokeStyle.

Πρακτικές ασκήσεις