canvas红包照片实例分享

效果:

点击RESET：随机显示剪辑区域；

点击SHOW：显示完整清晰图片；

图（1）点击RESET

图（2）点击SHOW

代码如下：

 #blur_div{
 width: 500px;
 height: 334px;
 margin: 0 auto;
 position: relative;
 margin-top:100px;
 }
 #blur_img{
 display: block;
 width: 500px;
 height: 334px;
 margin: 0 auto;
 filter: blur(15px);
 -webkit-filter: blur(15px);
 -moz-filter: blur(15px);
 -ms-filter: blur(15px);
 -o-filter: blur(15px);
 position:absolute;
 left: 0px;
 top: 0px;
 z-index: 0;
 }
 #canvas{
 display: block;
 margin: 0 auto;
 position:absolute;
 left: 0px;
 top: 0px;
 z-index: 100;

 }
 .button{
 display:block;
 position:absolute;
 z-index:200;
 width:80px;
 height:30px;
 color:white;
 text-decoration:none;
 text-align:center;
 line-height:30px;
 border-radius:5px;
 }
 #reset_button{
 left:100px;
 bottom:20px;
 background-color:#058;
 }
 #reset_button:hover{
 background-color:#047;
 }
 #show_button{
 right:100px;
 bottom:20px;
 background-color:#085;
 }
 #show_button:hover{
 background-color:#074;
 }



 
 
  
  RESET
  SHOW
  
 

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持考高分网！