We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS


This translation is incomplete. Please help translate this article from English.

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

Η ιδιότητα CanvasRenderingContext2D.imageSmoothingEnabled του Canvas 2D API μπορεί να καθοριστεί για να αλλάξει αν οι εικόνες θα είναι λείες (true, προεπιλογή) ή όχι (false). Όταν ζητηθεί η ιδιότητα imageSmoothingEnabled, επιστρέφει την τελευταία τιμή που καθορίστικε.

Αυτή η ιδιότητα είναι χρήσημη για παιχνίδια με θέμα pixel-art, όταν ο καμβάς κλιμακώνεται για παράδειγμα. Ο προεπιλεγμένος αλγόριθμος κλιμάκωσης μπορεί να δημιουργίσει θολά εφέ, και να καταστρέψει τα εικονοστοιχεία. Σε αυτή την περίπτωση ορίστε αυτή την ιδιότητα σε false. Δείτε επίσης την ιδιότητα CSS image-rendering.


ctx.imageSmoothingEnabled = value;


Ένα Boolean που δείχνωντας αν θα είναι λείες οι εικόνες ή όχι.


Χρησιμοποιώντας την ιδιότητα imageSmoothingEnabled

Αυτό είναι ένα απλό απόσπασμα κώδικα που χρησιμοποιά την ιδιότητα imageSmoothingEnabled με μία κλιμακωμένη εικόνα.


<canvas id="canvas"></canvas>


var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

var img = new Image();
img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
img.onload = function() {
 ctx.mozImageSmoothingEnabled = false;
 ctx.webkitImageSmoothingEnabled = false;
 ctx.msImageSmoothingEnabled = false;
 ctx.imageSmoothingEnabled = false;
 ctx.drawImage(img, 0, 0, 400, 200);

Επεξεργάστε τον παρακάτω κώδικα και δείτε ζωντανά τις αλλαγές σας στον καμβά:


Προδιαγραφή Κατάσταση Σχόλιο
HTML Living Standard
The definition of 'CanvasRenderingContext2D.imageSmoothingEnabled' in that specification.
Living Standard  

Συμβατότητα προγραμμάτων περιήγησης

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Χαρακτηριστικό Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 30 [1] (Yes)
51 (51)
? ?
Χαρακτηριστικό Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support ? ? (Yes)
51.0 (51)
? ? ?

[1] Υποστηρίζεται με webkit prefix μέχρι την έκδοση 29.

Δείτε επίσης

Εθελοντές και ετικέτες εγγράφου

Συνεισφέροντες σε αυτή τη σελίδα: theodoros_1234
Τελευταία ενημέρωση από: theodoros_1234,