扣丁学堂HTML5培训简述HTML5利用svg页面高斯模糊的方法

2019-05-27 11:08:10 192浏览

高斯模糊这项技术相信小伙伴们应该不是非常陌生，本篇文章扣丁学堂HTML5培训小编给读者们分享一下HTML5利用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开发方面内容的小伙伴，请关注扣丁学堂HTML5培训官网、微信等平台，扣丁学堂IT职业在线学习教育有专业的HTML5讲师为您指导，此外扣丁学堂老师精心推出的HTML5视频教程定能让你快速掌握HTML5从入门到精通开发实战技能。扣丁学堂H5技术交流群：673883249。

     【关注微信公众号获取更多学习资料】        【扫码进入HTML5前端开发VIP免费公开课】  

查看更多关于“HTML5开发技术资讯”的相关文章>>