HTML 画布 - imageSmoothingQuality 属性

上一步

下一步

HTML 画布的 imageSmoothingQuality 属性可以通过 Canvas 2D API 用来设置图像平滑质量。

可能的输入值

属性接受的值如下 -

序号	值 & 描述
1	低品质设置为低.
2	中品质设置为中.
3	高品质设置为高.

序号

值 & 描述

低

品质设置为低.

中

品质设置为中.

高

品质设置为高.

示例

以下示例采用图像并使用属性 HTML 画布 imageSmoothingQuality 属性应用低平滑质量。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="400" height="200" style="border: 1px solid black;background-color: grey;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      const image = new Image()
      image.src = 'https://tutorialspoint.com/images/logo.png';
      context.imageSmoothingQuality = 'low';
      context.drawImage(image, 25, 20, 300, 150);
   </script>
</body>
</html>

输出

上述代码在网页上返回的输出如下 -

HTML Canvas ImageSmoothingQuality Property

示例

对于以下示例，通过使用属性 imageSmoothingQuality 将平滑质量设置为中，在画布元素上呈现图像。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="400" height="200" style="border: 1px solid black;background-color: grey;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      const image = new Image()
      image.src = 'https://tutorialspoint.com/images/logo.png';
      context.imageSmoothingQuality = 'medium';
      context.drawImage(image, 25, 20, 300, 150);
   </script>
</body>
</html>

输出

上述代码在网页上返回的输出如下 -

示例

以下示例通过使用属性 imageSmoothingQuality 为画布元素内的图像对象设置高图像平滑质量。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="400" height="200" style="border: 1px solid black;background-color: grey;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      const image = new Image()
      image.src = 'https://tutorialspoint.com/images/logo.png';
      context.imageSmoothingQuality = 'high';
      context.drawImage(image, 25, 20, 300, 150);
   </script>
</body>
</html>

输出

上述代码在网页上返回的输出如下 -

html_canvas_images.htm

打印页面

上一步

下一步