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 July 2015.

Die imageSmoothingEnabled-Eigenschaft des CanvasRenderingContext2D-Interfaces, ein 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 Pixelgrafiken verwenden. Beim Vergrößern von Bildern wird der Standard-Resizing-Algorithmus die Pixel verwischen. 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 ebenfalls auf das 3-fache skaliert, aber ohne Bildglättung gezeichnet.

HTML

html
<canvas id="canvas" width="460" height="210"></canvas>

JavaScript

js
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 = () => {
  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

BCD tables only load in the browser

Siehe auch