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.

Canvas APICanvasRenderingContext2D 接口的 imageSmoothingEnabled 属性用于设置是否对缩放后的图片进行平滑处理,true 表示进行平滑处理(默认值),false 表示不进行。当我们获取 imageSmoothingEnabled 属性值时,它会返回最新设置的值。

这个属性对像素为主的游戏或其他应用很有用。放大图像时,默认的调整大小的算法会使得像素变模糊。可以将此属性设为 false 来保证像素的清晰度。

备注: 你可以使用 imageSmoothingQuality 属性来调整平滑质量。

一个布尔值,指示是否对缩放的图像进行平滑处理。默认值是 true

示例

禁用图像平滑

本示例比较了三个图像。第一个图像以其自然大小绘制,第二个图像缩放为 3 倍并启用了图像平滑,而第三个图像缩放为 3 倍但禁用了图像平滑。

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("源文件", 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);
};

结果

规范

Specification
HTML Standard
# dom-context-2d-imagesmoothingenabled-dev

浏览器兼容性

BCD tables only load in the browser

参见