在此页

• 句法
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

imageSmoothingEnabled 特性为 CanvasRenderingContext2D interface, part of the 画布 API , determines whether scaled images are smoothed ( true , default) or not ( false ). On getting the imageSmoothingEnabled property, the last value it was set to is returned.

This property is useful for games and other apps that use pixel art. When enlarging images, the default resizing algorithm will blur the pixels. Set this property to false to retain the pixels' sharpness.

注意： You can adjust the smoothing quality with the imageSmoothingQuality 特性。

句法

ctx.imageSmoothingEnabled = value;
					

选项

value

布尔 indicating whether to smooth scaled images or not. The default value is true .

范例

Disabling image smoothing

This example compares three images. The first image is drawn at its natural size, the second is scaled to 3X and drawn with image smoothing enabled, and the third is scaled to 3X but drawn with image smoothing disabled.

HTML

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

JavaScript

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 = function() {
  const w = img.width,
        h = img.height;
  ctx.fillText('Source', w * .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);
};
					

结果

规范

规范	状态	注释
HTML 实时标准 The definition of 'CanvasRenderingContext2D.imageSmoothingEnabled' in that specification.	实时标准

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	桌面						移动
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
imageSmoothingEnabled	Chrome 30 30 不支持 ? — 30 Prefixed Prefixed Implemented with the vendor prefix: webkit	Edge 15	Firefox 51 51 不支持 ? — 51 Prefixed Prefixed Implemented with the vendor prefix: moz	IE Yes Prefixed Yes Prefixed Prefixed Implemented with the vendor prefix: ms	Opera Yes	Safari Yes	WebView Android 4.4	Chrome Android Yes	Firefox Android 51 51 不支持 ? — 51 Prefixed Prefixed Implemented with the vendor prefix: moz	Opera Android Yes	Safari iOS Yes	Samsung Internet Android Yes

图例

完整支持

完整支持

实验。期望将来行为有所改变。

实验。期望将来行为有所改变。

要求使用供应商前缀或不同名称。

要求使用供应商前缀或不同名称。

另请参阅

• The interface defining this property: CanvasRenderingContext2D
• CanvasRenderingContext2D.imageSmoothingQuality
• image-rendering

元数据

• 最后修改： Jul 26, 2019

相关话题

1. CanvasRenderingContext2D
2. 特性

   1. canvas
   2. currentTransform
   3. direction
   4. fillStyle
   5. filter
   6. font
   7. globalAlpha
   8. globalCompositeOperation
   9. imageSmoothingEnabled
   10. imageSmoothingQuality
   11. lineCap
   12. lineDashOffset
   13. lineJoin
   14. lineWidth
   15. miterLimit
   16. shadowBlur
   17. shadowColor
   18. shadowOffsetX
   19. shadowOffsetY
   20. strokeStyle
   21. textAlign
   22. textBaseline
3. 方法

   1. addHitRegion()
   2. arc()
   3. arcTo()
   4. beginPath()
   5. bezierCurveTo()
   6. clearHitRegions()
   7. clearRect()
   8. clip()
   9. closePath()
   10. createImageData()
   11. createLinearGradient()
   12. createPattern()
   13. createRadialGradient()
   14. drawFocusIfNeeded()
   15. drawImage()
   16. drawWidgetAsOnScreen()
   17. drawWindow()
   18. ellipse()
   19. fill()
   20. fillRect()
   21. fillText()
   22. getImageData()
   23. getLineDash()
   24. getTransform()
   25. isPointInPath()
   26. isPointInStroke()
   27. lineTo()
   28. measureText()
   29. moveTo()
   30. putImageData()
   31. quadraticCurveTo()
   32. rect()
   33. removeHitRegion()
   34. resetTransform()
   35. restore()
   36. rotate()
   37. save()
   38. scale()
   39. scrollPathIntoView()
   40. setLineDash()
   41. setTransform()
   42. stroke()
   43. strokeRect()
   44. strokeText()
   45. transform()
   46. translate()