酷炫放大镜canvas实现

主要采用了canvas内渲染canvas的技术，还有利用比例来放大图片

比例：放大镜宽度/画布宽度=原图宽度/渲染图宽度

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>放大镜效果canvas实现</title>
<style>
*{
 margin: 0;
 padding: 0;
}
#canvas{
 position: absolute;
 left: 50%;
 top: 50%;
 -webkit-transform: translate3d(-50%,-50%,0);
 transform: translate3d(-50%,-50%,0);
 cursor:none;
}
</style>
</head>
<body>
 <canvas id="canvas"></canvas>
 <canvas id="zoom" style="display:none"></canvas>
 <script>
 var cvs=document.querySelector("#canvas");
 var zm=document.querySelector("#zoom");
 var ctx=cvs.getContext("2d");
 var ztx=zm.getContext("2d");
 var img=new Image();
 var scale=3;
 var magR=150;
 img.src="images/loli.jpg";
 img.onload=function(){
 cvs.width=img.width/scale;
 cvs.height=img.height/scale;
 zm.width=img.width;
 zm.height=img.height;
 ctx.drawImage(img,0,0,cvs.width,cvs.height);
 ztx.drawImage(img,0,0,zm.width,zm.height);
 cvs.onmousemove=function(e){
 var x=e.clientX-getBox(cvs).left;
 var y=e.clientY-getBox(cvs).top;
 var w=h=magR*2;
 var sx=x*scale-magR;
 var sy=y*scale-magR;
 var dx=x-magR;
 var dy=y-magR;
 ctx.drawImage(img,0,0,cvs.width,cvs.height);
 ctx.save();
 ctx.lineWidth=2;
 ctx.strokeStyle="#000";
 ctx.beginPath();
 ctx.arc(x,y,magR,0,Math.PI*2,false);
 ctx.stroke();
 ctx.clip();
 ctx.drawImage(zm,sx,sy,w,h,dx,dy,w,h);
 ctx.restore();
}
 cvs.onmouseout=function(){
  ctx.clearRect(0,0,cvs.width,cvs.height);
  ctx.drawImage(img,0,0,cvs.width,cvs.height);
}
 function getBox(canvas){
  return canvas.getBoundingClientRect();
}
}
</script>
</body>
</html>

演示地址 zoom

posted @ 2015-08-26 21:13  饶总真坏  阅读(622)  评论(0)    收藏  举报