Αιχμηρή απόδοση καμβά σε οθόνες υψηλού DPI και Retina
Γιατί τα γραφικά σε καμβά φαίνονται θολά στις οθόνες Retina και με υψηλό DPI και πώς να τα διορθώσετε με το devicePixelRatio, συμπεριλαμβανομένου του χειρισμού αλλαγής μεγέθους και των ορίων απόδοσης.
Core Takeaway
Ένας καμβάς φαίνεται θολός σε οθόνες υψηλής πυκνότητας όταν το μέγεθος των εικονοστοιχείων του ταιριάζει με το μέγεθος CSS, επειδή κάθε εικονοστοιχείο καμβά είναι τεντωμένο σε πολλά φυσικά εικονοστοιχεία. Διορθώστε το ρυθμίζοντας το πλάτος και το ύψος του καμβά στο μέγεθος CSS πολλαπλασιαζόμενο με το window.devicePixelRatio, διατηρώντας το μέγεθος CSS αμετάβλητο και κλιμακώνοντας το περιβάλλον σχεδίασης κατά την ίδια αναλογία. Ενημερώστε το για αλλαγή μεγέθους και ζουμ.
Γιατί οι καμβάδες θαμπώνουν
Το MDN περιγράφει το devicePixelRatio ως την αναλογία των φυσικών pixel προς τα CSS pixel στην τρέχουσα οθόνη: 1 σε μια κλασική οθόνη 96 DPI και 2 σε τυπικές οθόνες HiDPI ή Retina. Ένας καμβάς έχει το δικό του buffer pixel. Εάν αυτή η προσωρινή μνήμη είναι 300 επί 150 εικονοστοιχεία, αλλά εμφανίζεται σε 300 επί 150 εικονοστοιχεία CSS σε μια οθόνη με αναλογία 2, το πρόγραμμα περιήγησης την επεκτείνει σε 600 επί 300 φυσικά εικονοστοιχεία, κάτι που φαίνεται απαλό.
Η διόρθωση
Η προτεινόμενη προσέγγιση του MDN είναι να χρησιμοποιήσετε το devicePixelRatio για να προσθέσετε την επιπλέον πυκνότητα pixel: ορίστε την προσωρινή μνήμη του καμβά σε μέγεθος CSS επί την αναλογία, διατηρήστε το μέγεθος CSS ίδιο και κλιμακώστε το περιβάλλον 2D, ώστε ο κώδικας σχεδίασής σας να μπορεί να συνεχίσει να χρησιμοποιεί pixel CSS. Δείτε τον κώδικα παρακάτω.
Χειριστείτε αλλαγές μεγεθών και ζουμ
Η αναλογία αλλάζει όταν ένα παράθυρο μετακινείται σε άλλη οθόνη ή ο χρήστης κάνει ζουμ στη σελίδα. Υπολογίστε ξανά την αλλαγή μεγέθους και ακούστε για αλλαγές στο ερώτημα του μέσου ανάλυσης, ώστε να μπορείτε να σχεδιάσετε ξανά στη νέα πυκνότητα. Ένα ResizeObserver στο στοιχείο καμβά είναι ένας αξιόπιστος τρόπος για να διατηρήσετε το μέγεθος σε συγχρονισμό με τη διάταξη.
Όρια απόδοσης
Ο διπλασιασμός της αναλογίας τετραπλασιάζει τα εικονοστοιχεία προς σχεδίαση. Σε πολύ μεγάλους καμβάδες ή συσκευές χαμηλής ποιότητας, κλείστε την αναλογία, για παράδειγμα στο 2, και μετρήστε τους χρόνους καρέ. Οι χρόνοι εκτέλεσης κινούμενων εικόνων που έλκονται στον καμβά, όπως το πρόγραμμα απόδοσης καμβά του Lottie, το Rive και το ExodeUI, χειρίζονται αυτήν την κλιμάκωση για εσάς, αλλά ισχύει η ίδια αντιστάθμιση.
Απόσπασμα υλοποίησης παραγωγής
function setupCanvas(canvas) {
const ctx = canvas.getContext('2d');
function resize() {
const ratio = Math.min(window.devicePixelRatio || 1, 2); // cap for performance
const { width, height } = canvas.getBoundingClientRect(); // CSS size
canvas.width = Math.round(width * ratio); // backing store in device pixels
canvas.height = Math.round(height * ratio);
ctx.setTransform(ratio, 0, 0, ratio, 0, 0); // draw in CSS pixels
draw(ctx, width, height);
}
new ResizeObserver(resize).observe(canvas);
resize();
}
function draw(ctx, width, height) {
ctx.clearRect(0, 0, width, height);
ctx.lineWidth = 1;
ctx.strokeRect(0.5, 0.5, width - 1, height - 1); // crisp 1px border
}Κλειδί Principles για να θυμάστε
- devicePixelRatio = φυσικά pixel ανά CSS pixel (2 σε τυπικές οθόνες Retina)
- Ορισμός canvas.width/height σε CSS μέγεθος × αναλογία. διατηρήστε το μέγεθος CSS
- Κλιμακώστε το περιβάλλον έτσι ώστε ο κώδικας σχεδίασης να χρησιμοποιεί εικονοστοιχεία CSS
- Υπολογίστε ξανά το μέγεθος, παρακολουθήστε την αλλαγή και ζουμ
- Καλύψτε την αναλογία σε μεγάλους καμβάδες για απόδοση
Συχνές Ερωτήσεις
Πηγές
- Window: devicePixelRatio property — MDN Έγγραφα Ιστού