CanvasRenderingContext2D.imageSmoothingEnabled

https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/imageSmoothingEnabled

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀.由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变.

CanvasRenderingContext2D.imageSmoothingEnabled 是 Canvas 2D API 用来设置图片是否平滑的属性，true表示图片平滑（默认值），false表示图片不平滑。当我们获取 imageSmoothingEnabled属性值时，它会返回最新设置的值。

以缩放画布为例，这个属性对像素为主的游戏很有用。默认的改变大小的算法会造成图片模糊并且破坏图片原有的像素。如果那样的话，设置属性值为false。参见 CSS image-rendering 属性。

语法

ctx.imageSmoothingEnabled = value;

选项

value: 一个Boolean 类型的值，表示图片是否平滑。

示例

使用 `imageSmoothingEnabled` 属性

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

HTML

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

JavaScript

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

var img = new Image();
img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
img.onload = function() {
 ctx.mozImageSmoothingEnabled = false;
 ctx.webkitImageSmoothingEnabled = false;
 ctx.msImageSmoothingEnabled = false;
 ctx.imageSmoothingEnabled = false;
 ctx.drawImage(img, 0, 0, 400, 200);
};

var img = new Image();
img.src = 'https://mdn.mozillademos.org/files/222/Canvas_createpattern.png';
img.onload = function() {
 ctx.mozImageSmoothingEnabled = false;
 ctx.webkitImageSmoothingEnabled = false;
 ctx.msImageSmoothingEnabled = false;
 ctx.imageSmoothingEnabled = false;
 ctx.drawImage(img, 0, 0, 400, 200);
};

规范描述

Specification	Status	Comment
WHATWG HTML Living Standard CanvasRenderingContext2D.imageSmoothingEnabled	Living Standard

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	30 webkit (until 29)	(Yes) moz bug 768072	(Yes) ms	?	?

参见

接口定义， CanvasRenderingContext2D
image-rendering