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.com/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.com/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 ImageSmoothingEnabled Property
html_canvas_images.htm
打印页面
上页
下页
广告