CanvasRenderingContext2D: imageSmoothingEnabled 属性

基线 广泛可用

此功能已得到很好的建立，并在许多设备和浏览器版本上都能正常工作。自 2015 年 7 月.

报告反馈

imageSmoothingEnabled 属性是 CanvasRenderingContext2D 接口的一部分，该接口是 Canvas API 的组成部分，它决定了是否对缩放的图像进行平滑处理（true，默认值）还是不进行平滑处理（false）。获取 imageSmoothingEnabled 属性时，将返回最后一次设置的值。

此属性对于使用像素艺术的游戏和其他应用程序很有用。放大图像时，默认的调整大小算法会使像素模糊。将此属性设置为 false 可以保持像素的锐利度。

值

注意：可以使用 imageSmoothingQuality 属性调整平滑质量。

示例

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

禁用图像平滑

HTML

此示例比较了三张图像。第一张图像以其自然大小绘制，第二张图像缩放至 3 倍并启用图像平滑绘制，第三张图像缩放至 3 倍但禁用图像平滑绘制。
<canvas id="canvas" width="460" height="210"></canvas>

JavaScript

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

js

规范

结果
规范
# HTML 标准

浏览器兼容性

dom-context-2d-imagesmoothingenabled-dev

另请参阅