Σχεδίαση ορθογωνίων μέσω canvas σε JavaScript

Τα τετράγωνα και τα ορθογώνια δεν είναι απαραίτητο να σχεδιάζονται με χρήση συνδυασμών moveTo, lineTo - για αυτό υπάρχουν απλούστερες μέθοδοι. Ας τις εξετάσουμε.

Μέθοδος strokeRect

Η μέθοδος strokeRect(x, y, πλάτος, ύψος) σχεδιάζει στο σημείο που καθορίζεται το περίγραμμα ενός ορθογωνίου. Οι δύο πρώτες παράμετροι ορίζουν τις συντεταγμένες του σημείου, στο οποίο θα βρίσκεται η επάνω αριστερή γωνία του σχεδιασμένου ορθογωνίου.

Ας σχεδιάσουμε ένα ορθογώνιο με χρήση strokeRect (υποθέτουμε ότι το ctx υπάρχει ήδη):

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

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

ctx.strokeRect(50, 50, 100, 75);

Результат:

Μέθοδος fillRect

Η μέθοδος fillRect(x, y, πλάτος, ύψος) λειτουργεί παρόμοια με την strokeRect, μόνο που σχεδιάζει ένα γεμισμένο ορθογώνιο. Ας δούμε ένα παράδειγμα:

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

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

ctx.fillRect(50, 50, 100, 75);

Результат:

Μέθοδος rect

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

Ας σχεδιάσουμε το περίγραμμα με χρήση της 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, 75);
ctx.stroke();

Результат:

Και τώρα ας σχεδιάσουμε τη γεμισμένη φιγούρα:

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, 75);
ctx.fill();

Результат:

Μέθοδος clearRect

Η επόμενη μέθοδος clearRect(x, y, πλάτος, ύψος) λειτουργεί όπως μια γόμα, καθαρίζοντας μια ορθογώνια περιοχή και κάνοντας το περιεχόμενενά της εντελώς διαφανές.

Ας σχεδιάσουμε ένα τετραγωνάκι με χρήση της fillRect και ας σβήσουμε ένα μέρος του με χρήση της clearRect:

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

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

ctx.fillRect(50, 50, 100, 100);
ctx.clearRect(75, 75, 50, 50);

Результат: