CanvasRenderingContext2D.imageSmoothingEnabled

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

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

ctx.imageSmoothingEnabled = value;

value

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

Αυτό είναι ένα απλό απόσπασμα κώδικα που χρησιμοποιά την ιδιότητα 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);
};

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

<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);

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

• Την διεπαφή που την καθορίζει, CanvasRenderingContext2D
• image-rendering