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

2019-11-19 16:23:27

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了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>

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

上一篇：jquery Ajax实现Select动态添加数据

下一篇：vue实现一个移动端屏蔽滑动的遮罩层实例