canvas制作放大镜效果

最新推荐文章于 2024-03-29 17:03:34 发布

chujuan7169

最新推荐文章于 2024-03-29 17:03:34 发布

阅读量129

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/CodingPeasant/blog/501566

版权

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>canvas</title>
<style>
  *{margin: 0; padding: 0;}
  #canvas{display: block;margin: 0 auto; border: 1px solid #ddd;}
  #offCanvas{display: none;}
</style>
</head>
<body>
<canvas id="canvas">
  您的浏览器尚不支持canvas
</canvas>

<canvas id="offCanvas">
  您的浏览器尚不支持canvas
</canvas>

<script type="text/javascript">
  var canvas=document.getElementById('canvas');
  var context=canvas.getContext('2d');

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

  var image = new Image();
  var isMouseDown = false;
  var scale=

  window.οnlοad=function(){
   canvas.width=1200;
   canvas.height=799;

   image.src='1-lg.jpg';

   image.οnlοad=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.οnmοusedοwn=function(e){

   e.preventDefault();

   var point = windowToCanvas( e.clientX , e.clientY )
   console.log( point.x , point.y)

   isMouseDown = true
   drawCanvasWidthMagnifier( true , point)
  }

  canvas.onmousemove = function(e){
   e.preventDefault();
   if(isMouseDown == true)
   {
    var point=windowToCanvas( e.clientX , e.clientY )
    console.log( point.x , point.y)
    drawCanvasWidthMagnifier( true , point)
   }
  }

  canvas.onmouseup = function(e){

   e.preventDefault();
   isMouseDown = false
   drawCanvasWidthMagnifier( true , point)
  }

  canvas.onmouseout = function(e){

   e.preventDefault();
   isMouseDown = false
   drawCanvasWidthMagnifier(false)
  }

  function drawCanvasWidthMagnifier( isShowMagnifier , point){
   context.clearRect( 0 , 0 , canvas.width , canvas.height)
   context.drawImage(image , 0 , 0 , canvas.width , canvas.height)
   if( isShowMagnifier == true )
   {
    drawMagnifier(point)
   }
  }
  function drawMagnifier(point){

   var imageLG_cx=point.x*scale;
   var imageLG_cy=point.y*scale;

   var mr=200

   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.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>