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;
Επιλογές
value
- Ένα
Boolean
που δείχνωντας αν θα είναι λείες οι εικόνες ή όχι.
Παραδείγματα
Χρησιμοποιώντας την ιδιότητα imageSmoothingEnabled
Αυτό είναι ένα απλό απόσπασμα κώδικα που χρησιμοποιά την ιδιότητα imageSmoothingEnabled
με μία κλιμακωμένη εικόνα.
HTML
<canvas id="canvas"></canvas>
JavaScript
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);
};
Επεξεργάστε τον παρακάτω κώδικα και δείτε ζωντανά τις αλλαγές σας στον καμβά:
Playable code
<canvas id="canvas" width="400" height="200" class="playable-canvas"></canvas>
<div class="playable-buttons">
<input id="edit" type="button" value="Edit" />
<input id="reset" type="button" value="Reset" />
</div>
<textarea id="code" class="playable-code" style="height:140px;">
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);
};</textarea>
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var textarea = document.getElementById('code');
var reset = document.getElementById('reset');
var edit = document.getElementById('edit');
var code = textarea.value;
function drawCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
eval(textarea.value);
}
reset.addEventListener('click', function() {
textarea.value = code;
drawCanvas();
});
edit.addEventListener('click', function() {
textarea.focus();
})
textarea.addEventListener('input', drawCanvas);
window.addEventListener('load', drawCanvas);
Προδιαγραφές
Προδιαγραφή | Κατάσταση | Σχόλιο |
---|---|---|
HTML Living Standard The definition of 'CanvasRenderingContext2D.imageSmoothingEnabled' in that specification. |
Living Standard |
Συμβατότητα προγραμμάτων περιήγησης
Χαρακτηριστικό | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|
Basic support | 30 [1] | (Yes) moz 51 (51) |
(Yes) ms |
? | ? |
Χαρακτηριστικό | Android | Chrome for Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
---|---|---|---|---|---|---|
Basic support | ? | ? | (Yes) moz 51.0 (51) |
? | ? | ? |
[1] Υποστηρίζεται με webkit
prefix μέχρι την έκδοση 29.
Δείτε επίσης
- Την διεπαφή που την καθορίζει,
CanvasRenderingContext2D
image-rendering