CanvasRenderingContext2D.imageSmoothingEnabled
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Expérimental: Cette fonction est expérimentale
Puisque cette fonction est toujours en développement dans certains navigateurs, veuillez consulter le tableau de compatibilité pour les préfixes à utiliser selon les navigateurs.
Il convient de noter qu'une fonctionnalité expérimentale peut voir sa syntaxe ou son comportement modifié dans le futur en fonction des évolutions de la spécification.
La propriété CanvasRenderingContext2D.imageSmoothingEnabled
de l'API Canvas 2D peut être affectée pour changer le fait que les images soient lissées (true
, par défaut) ou non (false
). Lors de la récupération de la propriété imageSmoothingEnabled
, la dernière valeur à laquelle elle a été définie est renvoyée.
Cette propriété est utile pour les jeux à thème pixel-art, lors d'une mise à l'échelle du canvas par exemple. L'algorithme de redimensionnement par défaut peut créer des effets de flou et ruiner les jolis pixels. Mettez cette propriété à false
dans ce cas. Voir aussi la propriété CSS image-rendering
.
Syntaxe
ctx.imageSmoothingEnabled = valeur;
Options
Exemples
Désactiver le lissage d'image
Dans cet exemple, on compare trois images. La première image est dessinée avec sa taille naturelle, la deuxième est élargie pour obtenir 3 fois la taille originale et le lissage est activée, la troisième est élargie pour obtenir 3 fois la taille originale et le lissage est désactivé.
HTML
<canvas id="canvas" width="460" height="210"></canvas>
JavaScript
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.font = "16px sans-serif";
ctx.textAlign = "center";
const img = new Image();
img.src =
"https://interactive-examples.mdn.mozilla.net/media/examples/star.png";
img.onload = function () {
const w = img.width,
h = img.height;
ctx.fillText("Source", w * 0.5, 20);
ctx.drawImage(img, 0, 24, w, h);
ctx.fillText("Smoothing = TRUE", w * 2.5, 20);
ctx.imageSmoothingEnabled = true;
ctx.drawImage(img, w, 24, w * 3, h * 3);
ctx.fillText("Smoothing = FALSE", w * 5.5, 20);
ctx.imageSmoothingEnabled = false;
ctx.drawImage(img, w * 4, 24, w * 3, h * 3);
};
Résultat
Spécifications
Specification |
---|
HTML Standard # dom-context-2d-imagesmoothingenabled-dev |
Compatibilité des navigateurs
BCD tables only load in the browser
Voir aussi
- L'interface la définissant,
CanvasRenderingContext2D
image-rendering