Σχεδίαση ορθογωνίων μέσω canvas σε JavaScript
Τα τετράγωνα και τα ορθογώνια δεν είναι απαραίτητο
να σχεδιάζονται με χρήση συνδυασμών moveTo,
lineTo - για αυτό υπάρχουν απλούστερες μέθοδοι.
Ας τις εξετάσουμε.
Μέθοδος strokeRect
Η μέθοδος strokeRect(x, y, πλάτος,
ύψος) σχεδιάζει στο σημείο που καθορίζεται το περίγραμμα
ενός ορθογωνίου. Οι δύο πρώτες παράμετροι ορίζουν
τις συντεταγμένες του σημείου, στο οποίο θα βρίσκεται η επάνω
αριστερή γωνία του σχεδιασμένου ορθογωνίου.
Ας σχεδιάσουμε ένα ορθογώνιο με χρήση
strokeRect (υποθέτουμε ότι το ctx
υπάρχει ήδη):
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.strokeRect(50, 50, 100, 75);
:
Μέθοδος fillRect
Η μέθοδος fillRect(x, y, πλάτος, ύψος)
λειτουργεί παρόμοια με την strokeRect,
μόνο που σχεδιάζει ένα γεμισμένο ορθογώνιο.
Ας δούμε ένα παράδειγμα:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.fillRect(50, 50, 100, 75);
:
Μέθοδος rect
Η επόμενη μέθοδος rect(x, y, πλάτος,
ύψος) σχεδιάζει επίσης ένα ορθογώνιο. Αλλά
αυτό το ορθογώνιο θα γίνει ορατό, μόνο
αν εφαρμοστεί η μέθοδος stroke ή fill.
Στην πρώτη περίπτωση θα εμφανιστεί το περίγραμμα, και στη δεύτερη
- η γεμισμένη φιγούρα.
Ας σχεδιάσουμε το περίγραμμα με χρήση της 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, 75);
ctx.stroke();
:
Και τώρα ας σχεδιάσουμε τη γεμισμένη φιγούρα:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.rect(50, 50, 100, 75);
ctx.fill();
:
Μέθοδος clearRect
Η επόμενη μέθοδος clearRect(x, y,
πλάτος, ύψος) λειτουργεί όπως μια γόμα,
καθαρίζοντας μια ορθογώνια περιοχή και κάνοντας
το περιεχόμενενά της εντελώς διαφανές.
Ας σχεδιάσουμε ένα τετραγωνάκι με χρήση της fillRect
και ας σβήσουμε ένα μέρος του με χρήση της clearRect:
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.fillRect(50, 50, 100, 100);
ctx.clearRect(75, 75, 50, 50);
:
