canvas实现红包照片的效果

image.png

如图所示，照片被高斯模糊处理了，只留下一小块清晰区域，
当点击show按钮后，照片全部变为清晰，
点击reset按钮后，照片又变成高斯模糊的样子，每次点击reset的时候，产生的清晰区域的位置都不一样。
代码如下：
主文件：index.html

    
    
    

    


    

            
        
        RESET
        SHOW
    
    
    

样式文件：blur.css

*{
    margin:0;
    padding: 0;
}

#blur-div{
    margin:0 auto;
    position: relative;
    overflow: hidden;
}

#canvas{
    display: block;
    margin:0 auto;
    position: absolute;
    left:0px;
    top:0px;
    z-index: 100;
    /*background: #f00;*/
}

#image{
    display: block;
    margin:0 auto;
    -webkit-filter: blur(10px);
    -moz-filter: blur(10px);
    -ms-filter: blur(10px);
    -o-filter: blur(10px);
    filter: blur(10px);

    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 0;
}

.button{
    display: block;
    position: absolute;
    z-index: 200;

    width:100px;
    height: 30px;
    color: white;
    text-decoration: none;
    text-align:center;
    line-height: 30px;
    border-radius: 5px;
}

#reset-button{
    left: 50px;
    bottom:20px;
    background-color: #058;
}

#reset-button:hover{
    background-color: #047;
}

#show-button{
    right: 50px;
    bottom:20px;
    background-color: #085;
}

#show-button:hover{
    background-color: #074;
}

背景照片：banner.jpg

banner.jpg

项目目录：