http://jsfiddle.net/s6u9a/

HTML

<canvas id="canvas1" width="400" height="400"></canvas>

使用Javascript

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');
 
can.addEventListener('mousemove',function(e) {
var mouse = getMouse(e,can);
redraw(mouse);
},false);
 
 
function redraw(mouse) {
console.log('a');
can.width = can.width;
ctx.drawImage(img,0);
ctx.beginPath();
ctx.rect(0,500,500);
ctx.arc(mouse.x,mouse.y,70,Math.PI*2,true)
ctx.clip();
ctx.drawImage(img2,0);
}
 
var img = new Image();
img.onload = function() {
redraw({x: -450,y: -500})
}
    img.src = 'http://placekitten.com/400/400';
 
var img2 = new Image();
img2.onload = function() {
redraw({x: -450,y: -500})
}
    img2.src = 'http://placekitten.com/400/395';
 
 
function getMouse(e,canvas) {
var element = canvas,offsetX = 0,offsetY = 0,mx,my;
 
if (element.offsetParent !== undefined) {
    do {
        offsetX += element.offsetLeft;
        offsetY += element.offsetTop;
    } while ((element = element.offsetParent));
}
 
mx = e.pageX - offsetX;
my = e.pageY - offsetY;
 
return {
    x: mx,y: my
};
}