效果图如下:鼠标按下并移动放大镜出现,释放或移出图片外放大镜消失
代码如下:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#canvas{display:block;border:1px solid #aaa;margin:0 auto;}
#offCanvas{display:none;margin:0 auto;}
</style>
</head>
<body>
<canvas id="canvas">您的浏览器不支持canvas</canvas>
<canvas id="offCanvas"></canvas>
<script>
var canvas=document.getElementById("canvas");
var context=canvas.getContext("2d");
var offCanvas=document.getElementById("offCanvas");
var offContext=offCanvas.getContext("2d");
var isMouseDown=false;
var image=new Image();
var scale;
window.onload= function () {
canvas.width=800;
canvas.height=420;
image.src="https://file.youche.com/_1200_640/0/car/ddf08f20bfc4e124.jpg?area=1200_0x60";
image.onload= function () {
offCanvas.width=image.width;
offCanvas.height=image.height;
scale=offCanvas.width/canvas.width;
context.drawImage(image,0,0,canvas.width,canvas.height);
offContext.drawImage(image,0,0);
}
};
//鼠标交互
function windowToCanvas(x,y){//得到鼠标距离画布左边和上边的距离
var bbox=canvas.getBoundingClientRect();//画布到浏览器的左上右下的距离
return {x:x-bbox.left,y:y-bbox.top}
}
canvas.onmousedown= function (e) {
e.preventDefault();
//点击的具体坐标
var point=windowToCanvas(e.clientX, e.clientY);//e.clientX鼠标的位置
isMouseDown=true;
drawCanvasWithMagnifier(true,point);
};
canvas.onmousemove= function (e) {//鼠标移动放大镜移动
e.preventDefault();
if(isMouseDown){//显示放大镜
var point=windowToCanvas(e.clientX, e.clientY);
drawCanvasWithMagnifier(true,point);
}
};
canvas.onmouseup= function (e) {//鼠标抬起放大镜消失
e.preventDefault();
isMouseDown=false;
drawCanvasWithMagnifier(false);
};
canvas.onmouseout= function (e) {//鼠标移出canvas放大镜消失
e.preventDefault();
isMouseDown=false;
drawCanvasWithMagnifier(false);
};
function drawCanvasWithMagnifier(isShow,point){//画放大镜
context.clearRect(0,0,canvas.width,canvas.height);//清除画布
context.drawImage(image,0,0,canvas.width,canvas.height);
if(isShow){
drawMagnifier(point);
}
}
function drawMagnifier(point){
//原理就是一张图在两个canvas里,一张大的一张小的
//鼠标在小图上操作获得对应在大图的坐标显示大图的相应部分
//以造成放大镜的效果
var imageLG_cx=point.x*scale;//对应大图的x坐标
var imageLG_cy=point.y*scale;
var mr=100;//半径
var sx=imageLG_cx-mr;
var sy=imageLG_cy-mr;
var dx=point.x-mr;
var dy=point.y-mr;
context.save();
context.lineWidth=10;
context.strokeStyle="#069";
context.beginPath();
context.arc(point.x,point.y,mr,0,Math.PI*2);
context.stroke();
context.clip();//剪辑出一个圆形
context.drawImage(offCanvas,sx,sy,2*mr,2*mr,dx,dy,2*mr,2*mr);
context.restore();
}
</script>
</body>
</html>