HTML Canvas - imageSmoothingEnabled 屬性

上頁

下頁

Canvas Canvas API 的 HTML Canvas imageSmoothingEnabled 屬性根據傳入的值應用影像平滑處理。

此屬性通常用於開發遊戲中畫素最佳化，當屬性設定為 false 時，它能保持影像的銳利度。

可能輸入值

它採用布林值“true”或“false”，並對引用的影像物件施加平滑處理。預設值為“true”。

示例

以下示例採用影像並透過使用 HTML Canvas imageSmoothingEnabled 屬性，以值“true”對影像應用平滑處理。

<!DOCTYPE html>
<html lang="en">
<head>
   <title>Reference API</title>
   <style>
      body {
         margin: 10px;
         padding: 10px;
      }
   </style>
</head>
<body>
   <canvas id="canvas" width="450" height="150" style="border: 1px solid black;background-color: black;"></canvas>
   <script>
      var canvas = document.getElementById('canvas');
      var context = canvas.getContext('2d');
      const image = new Image()
      image.src = 'https://tutorialspoint.tw/scripts/img/logo-footer.png';
      context.drawImage(image, 20, 20, 150, 100);
      context.imageSmoothingEnabled = true;
      context.drawImage(image, 250, 20, 150, 100);
   </script>
</body>
</html>

輸出

影像在網頁上返回的輸出為 −

HTML Canvas ImageSmoothingEnabled Property

示例

在此示例中，我們採用影像並將平滑屬性作為“false”應用於上下文影像物件中，並使用 imageSmoothingEnabled 屬性在 Canvas 元素上呈現它。

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

輸出

影像在網頁上返回的輸出為 −

html_canvas_images.htm

列印頁面

上頁

下頁