如何通過htnl5利用svg來實(shí)現(xiàn)高斯模糊的效果？實(shí)現(xiàn)效果的方法分享！

使用過PS軟件的小伙伴們都知道高斯模糊這個(gè)效果吧!那么今天我們就來講一下有關(guān)于：“如何通過htnl5利用svg來實(shí)現(xiàn)高斯模糊的效果？”這個(gè)問題，下面是小編整理的相關(guān)內(nèi)容，有感興趣的小伙伴們快來參考學(xué)習(xí)了解吧！

先在頁面任意區(qū)域放上這段代碼：

stdDeviation設(shè)置模糊量，最低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上調(diào)用模糊效果：

document.body.style.filter='url(#blur-effect-2)' //調(diào)用2級模糊量

document.body.removeAttribute("style");//關(guān)閉模糊效果

通過上面我們說的這兩端代碼中就對我們高斯模糊效果有所了解，當(dāng)然如果你對html有感興趣的話我們可以在W3Cschool中進(jìn)行學(xué)習(xí)和了解。