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

 更新时间:2017年06月08日 15:43:50   作者:我在世界的尽头想你   我要评论

这篇文章主要为大家详细介绍了js 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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持澳门金沙网上娱乐。

相关文章

最新评论