SOURCE

window.onload=function(){
  'use strict';
var canvasWidth=800;
var canvasHeight=600;
var canvar=document.getElementById("canvas");
canvas.width=canvasWidth;
canvas.height=canvasHeight;
var pen=canvas.getContext('2d');

//创建图片，指定图片地址
var image=new Image();
var radius=50;
var clippingRegion={x:400,y:200,r:radius};
image.src="http://ww1.sinaimg.cn/large/006ieEhJgy1fd9vocx4efj30lo0fwka2";

//加载图片
image.onload=function(e){
    initImage();
};
// 初始化图片
function initImage(){
    clippingRegion={x:Math.random()*(canvasWidth-radius*2)+radius,
        y:Math.random()*(canvasHeight-radius*2)+radius,r:radius};
    drawImg(image,clippingRegion);
}

// 设置剪辑图片
function setClippingRegion(clippingRegion){
    pen.beginPath();
    pen.arc(clippingRegion.x,clippingRegion.y,clippingRegion.r,0,Math.PI*2,false);
    pen.clip();
}

// 绘制图片
function drawImg(image,clippingRegion){
    pen.clearRect(0,0,canvas.width,canvas.height);
    pen.save();
    setClippingRegion(clippingRegion);
    pen.drawImage(image,0,0,800,600);
    pen.restore();
}

// 展示图片
function show(){
    clearInterval(theAnimition);
  var theAnimition=setInterval(function () {
     console.log("draw");
     clippingRegion.r+=20
      if(clippingRegion.r>2*Math.max(canvas.width,canvas.height)){
            clearInterval(theAnimition);
      }
      drawImg(image,clippingRegion);
  },30)
}

// 重置图片
function reset() {
    initImage();
}
}

<div class="blur-div">
    <img class="blur-img" src="http://ww1.sinaimg.cn/large/006ieEhJgy1fd9vocx4efj30lo0fwka2" alt="chaozhou">
    <canvas id="canvas"></canvas>
    <a href="javascript:reset()" class="button" id="resetButton" >Reset</a>
    <a  href="javascript:show()" class="button"   id="showButton" >Show</a>
</div>

.blur-div{
    width: 800px;
    height: 600px;
    margin: 0 auto;
    position: relative;
    top: 0;
    left: 0;
    background-color: green;
}

.blur-img{
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 800px;
    height: 600px;
    margin:0 auto;
    filter: blur(20px);
    z-index: 0;
}

#canvas{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
}

.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;

}

#resetButton{
    left: 200px;
    bottom:20px;
    background-color: #058;
}
#resetButton:hover{
    background-color: #047;
}
#resetButton:active{
    color:white;
}

#showButton{
    right: 200px;
    bottom: 20px;
    background-color: #085;
}
#showButton:hover{
    background-color: #074;
}
#showButton:active{
    color: white;
}