var canvasWidth = 800;

var canvasHeight = 600;

var canvas = document.getElementById('canvas');

var context = canvas.getContext('2d');

canvas.width = canvasWidth;

canvas.height = canvasHeight;

var image = new Image();

image.src = 'blur.jpg';

var clippingRegion = {

x: 400,

y: 200,

r: 50

}

image.onload = function(e){

initCanvas();

}

function initCanvas(){

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

setClippingRegion(clippingRegion);

context.save();

context.drawImage(image, 0, 0, 800, 600);

context.restore();

}

function show(){

clippingRegion.r = 1000;

draw(image, clippingRegion);

}