htnl5利用svg頁面高斯模糊的方法

這篇文章主要介紹了htnl5利用svg頁面高斯模糊的方法的相關資料，有一定的參考價值，有需要的朋友可以參考一下，希望對你們有所幫助。

先在頁面任意區域放上這段程式碼

stdDeviation設定模糊量，最低0

<svg style="display:none">
    <filter id="blur-effect-1">
        <feGaussianBlur stdDeviation="1"/>
    </filter>
    <filter id="blur-effect-2">
        <feGaussianBlur stdDeviation="2"/>
    </filter>
</svg>

在dom上呼叫模糊效果

document.body.style.filter='url(#blur-effect-2)' //调用2级模糊量

document.body.removeAttribute("style");//关闭模糊效果

總結：以上就是本篇的全部內容，希望對大家的學習有所幫助。更多相關教學請造訪Html5影片教學！

相關推薦：

php公益訓練影片教學

#HTML5圖文教學

HTML5線上手冊

以上是htnl5利用svg頁面高斯模糊的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！