高斯模糊(毛玻璃效果)實現方式
原始碼,歡迎star哦
1:css
2:canvas StackBlur.js 借用
3:svg
本文選用方式 優勢:比canvas庫小,庫原始碼演算法較難懂;實現比 css 樣式效果更好,之前遇到過該類需求filter大後 css邊會變的模糊,效果較差
解決方案
文件註釋
<filter> 標籤的 id 屬性可為濾鏡定義一個唯一的名稱(同一濾鏡可被文件中的多個元素使用)
filter:url 屬性用來把元素連結到濾鏡。當連結濾鏡 id 時,必須使用 # 字元
濾鏡效果是通過 <feGaussianBlur> 標籤進行定義的。fe 字尾可用於所有的濾鏡
<feGaussianBlur> 標籤的 stdDeviation 屬性可定義模糊的程度
in="SourceGraphic" 這個部分定義了由整個影像建立效果
step2:使用
例項提供setBlurAmount,generateBlurredImage兩個介面動態設定