<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<style>
*{
margin:0;
padding:0;
}
#blue-div{
width:400px;
height:460px;
margin:0 auto;
position: relative;
}
#blue-image{
display:block;
width:400px;
height:460px;
margin:0 auto;
filter:blur(5px);
position: absolute;
left:0px;
top:0px;
z-index: 0;
}
#canvas{
display: block;
margin: 0 auto;
position: absolute;
left:0;
top:0;
z-index: 500;
/* background-color:red; */
}
.button{
display:block;
position: absolute;
z-index: 1000;
width:50px;
height:20px;
color:white;
text-decoration: none;
text-align: center;
line-height: 20px;
border-radius: 5px;
}
#reset-button{
left:100px;
bottom:10px;
background-color:#058;
}
#reset-button:hover{
background-color:#047;
}
#show-button{
right:100px;
bottom:10px;
background-color:#085;
}
#show-button{
background-color:#074;
}
</style>
</head>
<body>
<div id='blue-div'>
<img id='blue-image' src="luhan.jpg" >
<canvas id='canvas'></canvas>
<a href="javascript:reset()" class='button' id='reset-button'>Reset</a>
<a href="javascript:show()" class='button' id='show-button'>Show</a>
</div>
</body>
<script>
var canvasWidth=400;
var canvasHeight=460;
var canvas=document.getElementById('canvas');
canvas.width=canvasWidth;
canvas.height=canvasHeight;
var ctx=canvas.getContext("2d");
var radius=20;
var clippingRegion={x:-1,y:1,r:radius};
var image=new Image();
image.src='luhan.jpg';
image.onload=function(e){
initCanvas()
}
function initCanvas(){
clippingRegion=clippingRegion={x:Math.random()*(canvas.width-2*radius)+radius,y:Math.random()*(canvas.height-2*radius)+radius,r:radius};
draw(image,clippingRegion)
}
function setClippingRegion(clippingRegion){
ctx.beginPath();
ctx.arc(clippingRegion.x, clippingRegion.y, clippingRegion.r,0,2*Math.PI,true)
ctx.clip();
}
function draw(image,clippingRegion){
ctx.clearRect(0, 0,canvas.width,canvas.height);
ctx.save();
setClippingRegion(clippingRegion);
ctx.drawImage(image,0,0);
ctx.restore();
}
function show(){
var id=setInterval(function(){
clippingRegion.r+=20;
if(clippingRegion.r>2*Math.max(canvas.width,canvas.height)){
clearInterval(id);
}
draw(image,clippingRegion);
}, 30)
}
function reset(){
initCanvas()
}
</script>
</html>
