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


本文摘自PHP中文网,作者青灯夜游,侵删。

这篇文章主要介绍了htnl5利用svg页面高斯模糊的方法的相关资料,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

先在页面任意区域放上这段代码

stdDeviation设置模糊量,最低0

1

2

3

4

5

6

7

8

<svg style="display:none">

    <filter id="blur-effect-1">

        <feGaussianBlur stdDeviation="1"/>

    </filter>

    <filter id="blur-effect-2">

        <feGaussianBlur stdDeviation="2"/>

    </filter>

</svg>

在dom上调用模糊效果

1

2

3

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

 

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

总结:以上就是本篇文的全部内容,希望能对大家的学习有所帮助。更多相关教程请访问Html5视频教程!

相关推荐:

php公益培训视频教程

HTML5图文教程

HTML5在线手册

以上就是htnl5利用svg页面高斯模糊的方法的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

HTML5canvas的讲解以及实例教程

HTML5 canvas基本绘图之绘制线条

h5+c3+js实现楼层跳跃特效

HTML5本地存储storage实例详解

HTML5 videoapi,打造自己的web视频播放器

如何区别HTML5离线存储和本地缓存实例详解

HTML5让图片转圈的动画效果的实现方法介绍

HTML5标准学习-简介介绍

李炎恢HTML5视频资料分享

HTML5的下拉框应该如何增加用户体验

更多相关阅读请进入《HTML5》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...