CanvasRenderingContext2D: filter 屬性

值

filter 屬性接受 "none" 值，或者字串中包含以下一個或多個濾鏡函式。

url()

CSS url()。接受任何解析為 SVG 濾鏡元素的 URL。這可以是元素的 ID、外部 XML 檔案的路徑，甚至是經過資料編碼的 SVG 值。

blur()

CSS <length>。對繪圖應用高斯模糊。它定義了高斯函式的標準差值，即螢幕上多少畫素會相互混合；因此，較大的值會產生更多的模糊。值為 0 時，輸入保持不變。

brightness()

CSS <percentage>。對繪圖應用線性乘數，使其看起來更亮或更暗。小於 100% 的值會使影像變暗，而大於 100% 的值會使其變亮。值為 0% 會生成完全黑色的影像，而值為 100% 時輸入保持不變。

contrast()

CSS <percentage>。調整繪圖的對比度。值為 0% 會生成完全黑色的繪圖。值為 100% 時，繪圖保持不變。

drop-shadow()

對繪圖應用陰影效果。陰影實際上是繪圖 Alpha 蒙版的一種模糊、偏移版本，以特定顏色繪製併疊加在繪圖下方。此函式最多接受五個引數

<offset-x>

有關可能的單位，請參閱 <length>。指定陰影的水平距離。

<offset-y>

有關可能的單位，請參閱 <length>。指定陰影的垂直距離。

<blur-radius>

此值越大，模糊效果越明顯，陰影也會越大越淺。不允許負值。

<color>

有關可能的關鍵字和表示法，請參閱 <color> 值。

grayscale()

CSS <percentage>。將繪圖轉換為灰度。值為 100% 時為完全灰度。值為 0% 時，繪圖保持不變。

hue-rotate()

CSS <angle>。對繪圖應用色相旋轉。值為 0deg 時，輸入保持不變。

invert()

CSS <percentage>。反轉繪圖。值為 100% 時表示完全反轉。值為 0% 時，繪圖保持不變。

opacity()

CSS <percentage>。對繪圖應用透明度。值為 0% 時表示完全透明。值為 100% 時，繪圖保持不變。

saturate()

CSS <percentage>。對繪圖進行飽和處理。值為 0% 時表示完全不飽和。值為 100% 時，繪圖保持不變。

sepia()

CSS <percentage>。將繪圖轉換為棕褐色（sepia）。值為 100% 時表示完全棕褐色。值為 0% 時，繪圖保持不變。

none

不應用濾鏡。初始值。

示例

要檢視這些示例，請確保使用支援此功能的瀏覽器；請參閱下方的相容性表格。

應用模糊效果

此示例使用 filter 屬性模糊一段文字。

HTML

<canvas id="canvas"></canvas>

JavaScript

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.filter = "blur(4px)";
ctx.font = "48px serif";
ctx.fillText("Hello world", 50, 100);

結果

應用多種濾鏡

您可以組合任意數量的濾鏡。此示例將 contrast、sepia 和 drop-shadow 濾鏡應用於一張犀牛照片。

HTML

<canvas id="canvas" width="400" height="150"></canvas>
<div class="hidden">
  <img
    id="source"
    src="https://mdn.github.io/shared-assets/images/examples/rhino.jpg" />
</div>

.hidden {
  display: none;
}

JavaScript

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const image = document.getElementById("source");

image.addEventListener("load", (e) => {
  // Draw unfiltered image
  ctx.drawImage(image, 0, 0, image.width * 0.6, image.height * 0.6);

  // Draw image with filter
  ctx.filter = "contrast(1.4) sepia(1) drop-shadow(-9px 9px 3px #ee8811)";
  ctx.drawImage(image, 400, 0, -image.width * 0.6, image.height * 0.6);
});

結果

規範

瀏覽器相容性

另見

• 定義此屬性的介面：CanvasRenderingContext2D
• CSS filter
• CSS <filter-function>