首頁 > 開發者 > JavaScript

js canvas實現放大鏡查看圖片功能，

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

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>

以上就是本文的全部內容，希望對大家的學習有所協助，也希望大家多多支援幫客之家。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More