<script type="text/javascript">
window.onload=function(){
var bigcanvas=document.getElementById("bigcanvas");
var bigContext=bigcanvas.getContext("2d");
var mycanvas=document.getElementById("mycanvas");
var mycanvasContext=mycanvas.getContext("2d");
var image=new Image();
image.src="img.jpg";
image.onload=function(){
bigContext.drawImage(image,0,0,bigcanvas.width,bigcanvas.height);
mycanvasContext.drawImage(image,0,0,mycanvas.width,mycanvas.height);
}
var mr=100;
var ismousedown=false;
mycanvas.onmousedown=function(event){
ismousedown=true;
var bbox=mycanvas.getBoundingClientRect();
var minx=event.clientX-bbox.left;
var miny=event.clientY-bbox.top;
//console.log(minx,miny);
var bigx=minx*3;
var bigy=miny*3;
mycanvasContext.clearRect(0,0,mycanvas.width,mycanvas.height);
mycanvasContext.drawImage(image,0,0,mycanvas.width,mycanvas.height);
mycanvasContext.drawImage(bigcanvas,bigx-mr,bigy-mr,200,200,minx-mr,miny-mr,200,200);
}
mycanvas.onmouseup=function(event){
ismousedown=false;
mycanvasContext.clearRect(0,0,mycanvas.width,mycanvas.height);
mycanvasContext.drawImage(image,0,0,mycanvas.width,mycanvas.height);
}
mycanvas.onmouseover=function(event){
ismousedown=false;
}
mycanvas.onmousemove=function(){
if( ismousedown==true){
var bbox=mycanvas.getBoundingClientRect();
var minx=event.clientX-bbox.left;
var miny=event.clientY-bbox.top;
//console.log(minx,miny);
var bigx=minx*3;
var bigy=miny*3;
mycanvasContext.clearRect(0,0,mycanvas.width,mycanvas.height);
mycanvasContext.drawImage(image,0,0,mycanvas.width,mycanvas.height);
mycanvasContext.drawImage(bigcanvas,bigx-mr,bigy-mr,200,200,minx-mr,miny-mr,200,200);
}
}
}
</script>
就是基本的canvas对象操作而已，
getBoundingClientRect
canvas getContext对象方法和属性详细介绍