js canvas实现放大镜查看图片功能

更新时间：2020-05-17 00:48:01 作者：startmvc

本文实例为大家分享了canvas实现放大镜查看图片功能的具体代码，供大家参考，具体内容如

本文实例为大家分享了canvas实现放大镜查看图片功能的具体代码，供大家参考，具体内容如下


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body style="background: black;">
<canvas id="myCanvas" style="display: block;margin: 0px auto;border: 10px solid #aaa ">
 你的浏览器不支持canvas
</canvas>
<canvas id="offCanvas" style="display: none"></canvas>
<script>
 var myCanvas = document.getElementById("myCanvas");
 var context = myCanvas.getContext("2d");

 var offCanvas = document.getElementById("offCanvas");
 var offContext = offCanvas.getContext("2d");

 var isMouseDown = false;
 var scale;

 var image = new Image();

 window.onload = function () {

 myCanvas.width = 300;
 myCanvas.height = 200;

 image.src = "1.jpg";

 image.onload = function () {

 offCanvas.width = image.width;
 offCanvas.height = image.height;
 scale = offCanvas.width / myCanvas.width ;

 context.drawImage(image,0,0,myCanvas.width,myCanvas.height);
 offContext.drawImage(image,0,0);

 }

 };
 function windowToCanvas(x,y) {
 var bbox = myCanvas.getBoundingClientRect();
 return { x : x - bbox.left , y : y - bbox.top};
 }
 myCanvas.onmousedown = function (e) {
 e.preventDefault();
 var point = windowToCanvas(e.clientX , e.clientY);
 console.log(point);
 isMouseDown = true;
 drawCanvasWithMagnifier( true , point );
 };
 myCanvas.onmousemove = function (e) {
 e.preventDefault();
 if (isMouseDown ){
 var point = windowToCanvas(e.clientX , e.clientY);
 drawCanvasWithMagnifier( true , point );
 }
 };
 myCanvas.onmouseup = function (e) {
 e.preventDefault();
 isMouseDown = false;
 drawCanvasWithMagnifier( false );
 };
 myCanvas.onmouseout = function (e) {
 e.preventDefault();
 isMouseDown = false;
 drawCanvasWithMagnifier( false );
 };
 function drawCanvasWithMagnifier( isShowMagnifier , point) {
 context.clearRect(0,0,myCanvas.width,myCanvas.height);
 context.drawImage(image,0,0,myCanvas.width,myCanvas.height);
 if(isShowMagnifier == true ){
 drawMagnifier( point );
 }
 }
 function drawMagnifier( point ) {
 var imageLG_cx = point.x * scale ;
 var imageLG_cy = point.y * scale ;

 var mr = 20 ;

 var sx = imageLG_cx - mr ;
 var sy = imageLG_cy - mr ;

 var dx = point.x - mr ;
 var dy = point.y - mr ;

 context.save();

 context.lineWidth = 5.0;
 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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。