var wid = 800,

hei = 600,

canvas = document.getElementById('canvas'),

ctx = canvas.getContext('2d'),

clippingRegion = {},

radius = 70,

theAnimation; //控制show动画

canvas.width = wid;

canvas.height = hei;

var image = new Image();

image.src = 'img/1.jpg';

image.onload = function() {

initCanvas();

}

function initCanvas() {

clearInterval(theAnimation);

clippingRegion = {

x: (Math.random() * (wid - radius * 2) + 50),

y: (Math.random() * (hei - radius * 2) + 50),

r: 0

};

var ID = setInterval(function(){

clippingRegion.r +=4;

draw(image, clippingRegion);

if(clippingRegion.r>=radius){

clearInterval(ID);

}

},30)

}

function draw(image, clippingRegion) {

ctx.clearRect(0, 0, wid, hei);

ctx.save();

setClippingRegion(clippingRegion);

ctx.drawImage(image, 0, 0, wid, hei);

ctx.restore();

}

function setClippingRegion(clippingRegion) {

ctx.beginPath();

ctx.arc(clippingRegion.x, clippingRegion.y, clippingRegion.r, 0, 2 * Math.PI, false);

ctx.clip();

}

function reset() {

initCanvas();

}

function show() {

theAnimation = setInterval(function(){

clippingRegion.r +=20;

draw(image, clippingRegion);

if(clippingRegion.r>=2*Math.max(wid,hei)){

clearInterval(theAnimation);

}

},30)

}