function show() { //添加动画 var theAnimation = setInterval(function() { clippingRegion.r += 20; //慢慢扩大显示 //边界条件 if (clippingRegion.r > 2 * Math.max(canvas.width, canvas.height)) { //停止动画，否则函数执行不停止 clearInterval(theAnimation); } draw(image, clippingRegion);//循环执行draw方法，慢慢将剪辑区域的半径扩大，实现动画效果 }, 30);//bug，显示之后立即点击重置，还是会打开图片，可能是因为定时器还没结束 }
重置则再次初始化canvas就行了，在initCanvas已经做了随机位置，所以每次点击重置都是随机位置的剪辑区域
//重置，initCanvas function reset() { initCanvas(); }
完整blur.js代码
var canvasWidth = window.innerWidth; //最外层div宽=窗口宽高，为了适应 var canvasHeight = window.innerHeight; 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 = "https://www.jb51.net/img/gd.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(); } function initCanvas() { //重置剪辑区域，归位,随机 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); } //设置剪辑区域 function setClippingRegion(clippingRegion) { context.beginPath(); //创建路径 context.arc(clippingRegion.x, clippingRegion.y, clippingRegion.r, 0, Math.PI * 2, false); //画圆形 context.clip(); } function draw(image, clippingRegion) { context.clearRect(0, 0, canvas.width, canvas.height); context.save(); //图像绘制前，确定剪辑区域 setClippingRegion(clippingRegion); context.drawImage(image, 0, 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(); }