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.tw/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.tw/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.tw/images/logo.png';
      context.imageSmoothingQuality = 'high';
      context.drawImage(image, 25, 20, 300, 150);
   </script>
</body>
</html>

輸出

上述程式碼在網頁上返回的輸出如下 -

html_canvas_images.htm

列印頁面

上一步

下一步