var canvas = document.getElementById("canvas");//获取到canvas元素对象
var context = canvas.getContext("2d");//获取2d context

//设置canvas大小和最外层div宽高一样
canvas.width = canvasWidth;
canvas.height = canvasHeight;

//用canvas显示清晰图像
var image = new Image();
image.src = "img/gd.jpg";

//剪辑区域
var radius = 30;//剪辑区域圆的半径
var clippingRegion;//剪辑区域对象

代码设置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();//这是初始化canvas的方法
}

随机 clippingRegion = { //保证剪辑区域一定在有图像的地方 x: Math.random() * (canvas.width - 2 * radius) + radius,y: Math.random() * (canvas.height - 2 * radius) + radius,r: radius }; draw(image,clippingRegion);//这是绘制image的方法 }

context.restore();
}

2 * Math.max(canvas.width,canvas.height)) { //停止动画，否则函数执行不停止 clearInterval(theAnimation); } draw(image,clippingRegion);//循环执行draw方法，慢慢将剪辑区域的半径扩大，实现动画效果 },30);//bug，显示之后立即点击重置，还是会打开图片，可能是因为定时器还没结束 }

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

//设置canvas大小和最外层div宽高一样
canvas.width = canvasWidth;
canvas.height = canvasHeight;

//用canvas显示清晰图像
var image = new Image();
var radius = 30;
//剪辑区域
var clippingRegion;
image.src = "img/gd.jpg";

//因为图像加载需要时间，所以用onload方法，等待图片加载完成后再执行函数
image.onload = function(e) {
//blur-div 和canvas宽高调整
$('#blur-div').css("width",canvasHeight + "px");

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

initCanvas();
}

function initCanvas() {
//重置剪辑区域，归位,随机

clippingRegion = { //保证剪辑区域一定在有图像的地方
x: Math.random() (canvas.width - 2 radius) + radius,//30-320 0-width 减掉半径30 350-302
y: Math.random() (canvas.height - 2 radius) + radius,//30-190 0-height 减掉半径30 220-302
r: radius
};
draw(image,clippingRegion);
}

//设置剪辑区域
function setClippingRegion(clippingRegion) {
context.beginPath(); //创建路径
context.arc(clippingRegion.x,false); //画圆形
context.clip();
}

function draw(image,canvas.height);

context.save();
//图像绘制前，确定剪辑区域
setClippingRegion(clippingRegion);

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

context.restore();
}

//完全显示清晰图像，复用draw函数，将剪辑区域变大
function show() {
//添加动画,此函数有缺点
clippingRegion.r=radius;//给半径归位
var theAnimation = 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
function reset() {
initCanvas();
}