CanvasRenderingContext2D: imageSmoothingEnabled-Eigenschaft
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.
Die imageSmoothingEnabled-Eigenschaft des CanvasRenderingContext2D-Interfaces, Teil der Canvas API, bestimmt, ob skalierte Bilder geglättet werden (true, Standard) oder nicht (false). Beim Abrufen der imageSmoothingEnabled-Eigenschaft wird der letzte Wert zurückgegeben, auf den sie gesetzt wurde.
Diese Eigenschaft ist nützlich für Spiele und andere Anwendungen, die Pixelkunst verwenden. Beim Vergrößern von Bildern verwischt der Standard-Resizing-Algorithmus die Pixel. Setzen Sie diese Eigenschaft auf false, um die Schärfe der Pixel zu erhalten.
Hinweis:
Sie können die Glättungsqualität mit der
imageSmoothingQuality-Eigenschaft
anpassen.
Wert
Ein boolescher Wert, der angibt, ob skalierte Bilder geglättet werden sollen oder nicht. Der Standardwert ist true.
Beispiele
Deaktivieren der Bildglättung
Dieses Beispiel vergleicht drei Bilder. Das erste Bild wird in seiner natürlichen Größe gezeichnet, das zweite wird auf das 3-fache skaliert und mit aktivierter Bildglättung gezeichnet, und das dritte wird auf das 3-fache skaliert, aber ohne Bildglättung gezeichnet.
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 = "/shared-assets/images/examples/big-star.png";
img.onload = () => {
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);
};
Ergebnis
Spezifikationen
| Specification |
|---|
| HTML # dom-context-2d-imagesmoothingenabled-dev |
Browser-Kompatibilität
Loading…
Siehe auch
- Das Interface, das diese Eigenschaft definiert:
CanvasRenderingContext2D CanvasRenderingContext2D.imageSmoothingQualityimage-rendering