[ Leksykon ] [ JavaScript ] [ Metody ] [ Właściwości ] [ canvas ] [ CanvasRenderingContext2D ]

CanvasRenderingContext2D.imageSmoothingQuality

[_] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z]

Przykłady:

<script>

 window.onload = () => {

   const szer = 600;
   const wys = 300;

   const canvas = document.getElementById("canvas");
   canvas.width = szer;
   canvas.height = wys; 
   const ctx = canvas.getContext("2d");

   ctx.fillStyle = "rgba(0,51,102,0.9)";
   ctx.font = "12px sans-serif";
   ctx.textAlign = "center";

   const img = new Image();
   img.src = "dom.jpg";
   img.onload = () => {

     const szer = img.width, wys = img.height;

     ctx.fillText("1:2 Wygładzanie = true", 75, 10);
     ctx.imageSmoothingEnabled = true; // Wygładzanie tak
     ctx.imageSmoothingQuality = "high";
     ctx.drawImage(img, 0, 25, szer / 2, wys / 2);

     ctx.fillText("1:1 Wygładzanie = false", 250, 10);
     ctx.imageSmoothingEnabled = false; // Wygładzanie nie
     ctx.drawImage(img, szer / 2, 25, szer, wys);

     ctx.fillText("2:1 Wygładzanie = true", 475, 10);
     ctx.imageSmoothingEnabled = true; // Wygładzanie tak
     ctx.imageSmoothingQuality = "low";
     ctx.drawImage(img, szer + szer / 4, 25, szer * 3, wys * 3);

   };

   return;

 };

</script>

<canvas id="canvas" width="1" height="1"></canvas>

Opis:
Właściwość CanvasRenderingContext2D.imageSmoothingQuality pozwala ustawić jakość wygładzania obrazu, aby ta właściwość miała wpływ imageSmoothingEnabled musi być true. Wartość "low" - Niska jakość, "medium" - Średniej jakości, "high" - Wysoka jakość.

Zobacz też:
imageSmoothingEnabled - Tryb wygładzania obrazu, jeśli ta opcja jest wyłączona, obrazy nie będą wygładzane w skalowaniu