作者 temporary [actionscript] 2015-09-19 11:23 (点击下载)

window.onload=function(){
 
	var can=document.getElementById('myCanvas');
	var ctx=can.getContext('2d');
 
	var img=new Image();
	img.src='./image/background.png';
	img.onload=function(){
 
		ctx.drawImage(img,0,0,600,450);
	}
 
	function getClip(context,x,y){
		context.save();
		context.beginPath();
		context.arc(x,y,80,0,Math.PI*2,true);
		context.stroke();
		context.clip();
		//下面一句不会改
		context.drawImage(img,x*2,y*2,1200,900);
		context.restore();
	}
 
	can.onmousemove=function(e){
		var e=e?e:
		ctx.clearRect(0,0,600,600);
		ctx.drawImage(img,0,0,600,450);
		var pointer=getMousePosi(can,e.clientX,e.clientY);
		getClip(ctx,pointer.x,pointer.y);
 
	}
 
	function getMousePosi(canvas,x,y){
		var box=canvas.getBoundingClientRect();
		var cx=x-box.left;
		var cy=y-box.top;
		return {x:cx,y:cy};
	}
 
}