EN
이 콘텐츠는 한국어로 제공되지 않아 영어 버전으로 표시됩니다.

msImageSmoothingEnabled property

Choose bilinear or nearest-neighbor image smoothing when images are resized.

This property is read/write.

HTML Canvas 2D Context level 2IE11

Syntax


context.msImageSmoothingEnabled = false;

Property values

Type: bool

ValueCondition
true

Use bilinear scaling.

false

Use nearest-neighbor scaling.

 

Standards information

Remarks

The default for this property is true, or use bilinear scaling. When a small image is scaled to a larger size, bilinear scaling creates a soft looking image. The following illustrations are scaled up versions of a 24x24 pixel device. The original image isn't anti-aliased and you can still see the difference when you enlarge it.

Screen shot of small image enlarged using bilinear scaling.

Set msImageSmoothingEnabled to false to force images to use nearest-neighbor scaling. The result is a pixilated but clearer looking image.

Screen shot of paint palette enlarged using nearest neighbor scaling.

This property impacts drawing images and patterns on the following APIs.

Examples

The following example initially displays an enlarged image using the default (or true) setting. Click the button to toggle between true and false to see the effect of image smoothing on the image. Try the example.


<!DOCTYPE html> <html>
<head>
  <title>canvasImageTest </title>
      <meta http-equiv="X-UA-Compatible" content="IE=edge"/> 
</head>
<body>   
  <canvas id="MyCanvas" width="225" height="225"> </canvas>
  <p>
    <button onclick="draw()">Change smoothing </button>    
  </p>
  <script type="text/javascript">        
    var smooth = true;
    draw();

    function draw() {
      var image = document.createElement("img");
      image.src = "geotest.png";
      image.addEventListener("load", function () {
        var canvas = document.getElementById("MyCanvas");
        if (canvas.getContext) {
          var ctx = canvas.getContext("2d");                // Get the context.
          // Set image smoothing to either bilinear (true) or nearest neighbor (false)
          if (smooth == true) {
            smooth = false;
          } else {
            smooth = true;
          }
          ctx.msImageSmoothingEnabled = smooth;
          ctx.clearRect(0, 0, canvas.width, canvas.height);    // Clear the last image, if it exists.
          // var image = document.getElementById("pix");       // Get the address of the picture.
          // Straight draw. 
          ctx.drawImage(image, 1, 1);
          // Stretch the image a bit.
          ctx.drawImage(image, 20, 20, 200, 200);
          }
      }, false);
    }
  </script>
</body>
</html> 


See also

CanvasRenderingContext2D

 

 

표시:
© 2014 Microsoft