红包模糊

来源：互联网发布：java log4j2 配置编辑：程序博客网时间：2024/04/29 03:33

<!DOCTYPE html>

<html>

<head>

<metacharset="utf-8" />

<metaname="viewport" content="height=device-height,width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

<title>模糊红包效果</title>

<scripttype="text/javascript" src="js/jquery-2.1.3.min.js"></script>

</head>

margin:0px;

padding:0px;

}

#blur-div{

width:350px;

height:220px;

margin:0 auto;

position:relative;

overflow:hidden;

}

.button{

display:block;

position:absolute;

z-index:200;

/*按钮在最上面*/

width:60px;

height:30px;

color: white;

text-decoration:none;

text-align:center;

line-height:30px;

border-radius:2px;

}

#reset-button{

left:40px;

bottom:20px;

background-color:#058;

}

#reset-button:hover{

background-color:#047;

}

#show-button{

right:40px;

bottom:20px;

background-color:#085;

}

#show-button:hover{

background-color:#074;

}

#canvas{

display:block;

margin:0 auto;

position:absolute;

left:0px;

top:0px;

/*canvas在image之上，在按钮下，z-index大于image,小于btn*/

z-index:100;

}

#blur-image{

display:block;

width:350px;

height:220px;

margin:0 auto;

/*模糊效果*/

filter: blur(20px);

-webkit-filter: blur(20px);

-moz-filter: blur(20px);

-ms-filter: blur(20px);

-o-filter: blur(20px);

position:absolute;

left:0px;

top:0px;

z-index:0;

}

</style>

<body>

<divid="blur-div">

<imgid="blur-image" src="img/gd.jpg" />

<canvasid="canvas"></canvas>

<ahref="javascript:reset()" class="button" id="reset-button">重置</a>

<ahref="javascript:show()" class="button" id="show-button">显示</a>

</div>

<scripttype="text/javascript">

varcanvasWidth = window.innerWidth;//最外层div宽=窗口宽高，为了适应

varcanvasHeight = window.innerHeight;

var canvas = document.getElementById("canvas");

var context = canvas.getContext("2d");

//设置canvas大小和最外层div宽高一样

canvas.width= canvasWidth;

canvas.height = canvasHeight;

//用canvas显示清晰图像

varimage = new Image();

var radius = 30;

//剪辑区域

varclippingRegion;

image.src= "img/a11.jpg";

//因为图像加载需要时间，所以用onload方法，等待图片加载完成后再执行函数

image.onload= function(e) {

//blur-div 和canvas宽高调整

$('#blur-div').css("width", canvasWidth+ "px");

$('#blur-div').css("height", canvasHeight+ "px");

$('#blur-image').css("width",image.width +"px");

$('#blur-image').css("height",image.height +"px");

initCanvas();

}

functioninitCanvas() {

//重置剪辑区域，归位,随机

clippingRegion= { //保证剪辑区域一定在有图像的地方

x:Math.random() * (canvas.width - 2 * radius) + radius, //30-320 0-width 减掉半径30 350-30*2

y:Math.random() * (canvas.height - 2 * radius) + radius, //30-190 0-height 减掉半径30 220-30*2

r:radius

};

draw(image, clippingRegion);

}

//设置剪辑区域

functionsetClippingRegion(clippingRegion) {

context.beginPath();//创建路径

context.arc(clippingRegion.x, clippingRegion.y, clippingRegion.r,0, Math.PI * 2,false); //画圆形

context.clip();

}

functiondraw(image,clippingRegion) {

context.clearRect(0,0, canvas.width, canvas.height);

context.save();

//图像绘制前，确定剪辑区域

setClippingRegion(clippingRegion);

context.drawImage(image,0, 0); //图片大于canvas

context.restore();

}

//完全显示清晰图像，复用draw函数，将剪辑区域变大

functionshow() {

//添加动画,此函数有缺点

clippingRegion.r= radius; //给半径归位

vartheAnimation = setInterval(function() {

console.log("anima");

clippingRegion.r+= 20; //慢慢扩大显示

//边界条件

if(clippingRegion.r> 2 * Math.max(canvas.width, canvas.height)) {//停止动画，否则函数执行不停止1000

clearInterval(theAnimation);

}

draw(image, clippingRegion);

}, 30);

}

//重置，initCanvas

functionreset() {

initCanvas();

}

</script>

</body>

</html>

0 0