CanvasRenderingContext2D:imageSmoothingQuality 属性

Canvas 2D API 的 CanvasRenderingContext2D 接口的 imageSmoothingQuality 属性,用于设置图像平滑度。

备注: 要使此属性生效,imageSmoothingEnabled 属性必须为 true

以下之一:

"low"

低质量。

"medium"

中等质量。

"high"

高质量。

默认值为 "low"

示例

设置图像平滑质量

这是一段简单的代码片段,对缩放的图片使用 imageSmoothingQuality 属性。

HTML

html
<canvas id="canvas"></canvas>

JavaScript

js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

let img = new Image();
img.src = "canvas_createpattern.png";
img.onload = () => {
  ctx.imageSmoothingQuality = "low";
  ctx.drawImage(img, 0, 0, 300, 150);
};

结果

规范

Specification
HTML
# dom-context-2d-imagesmoothingquality-dev

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
imageSmoothingQuality

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support

参见