canvas怎么實(shí)現(xiàn)圖像放大鏡

這篇文章主要介紹了canvas怎么實(shí)現(xiàn)圖像放大鏡，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)建站主營清河網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營網(wǎng)站建設(shè)方案,成都App制作,清河h5成都微信小程序搭建,清河網(wǎng)站營銷推廣歡迎清河等地區(qū)企業(yè)咨詢

具體內(nèi)容如下

<!DOCTYPE html> 
<html> 
<head lang="en"> 
  <meta charset="UTF-8"> 
  <title>canvas-放大鏡</title> 
  <style> 
    body{ 
      padding: 0px; 
      margin: 0px; 
    } 
    #canvas{ 
      border: 1px solid red; 
      margin: 100px; 
    } 
  </style> 
</head> 
<body> 
  <canvas id="canvas" width="800px" height="500px"> 
  </canvas> 
  <script> 
    //獲取到canvas元素 
    var canvas = document.getElementById('canvas'); 
    //獲取canvas中的畫圖環(huán)境 
    var context = canvas.getContext('2d'); 
 
    var img = new Image(); 
    img.src = "./image/liuyifei.jpg"; 
 
    window.onload = function(){ 
      //獲取放大鏡 
      getfangdajing(context,canvas,img,150,2); 
    } 
 
    /* 
    *  context:繪制環(huán)境對象, 
    *  element:canvas元素對象 
    *  img：圖片對象 
    *  diameter:放大鏡的大小， 
    *  ratio：圖形的放大比例， 
    * （比例 = 原圖 ：鏡中圖像）0<ratio<1縮小圖像，ratio>1放大圖像 
    * */ 
    function getfangdajing(context,element,img,diameter,ratio){ 
      //繪制圖片 
      context.drawImage(img,0,0,element.width,element.height); 
      //鼠標(biāo)在element中移動觸發(fā)事件 
      element.onmousemove = function (e){ 
        context.clearRect(0,0,element.width,element.height); 
        //繪制圖片 
        context.drawImage(img,0,0,element.width,element.height); 
        //解決瀏覽器兼容問題 
        var e = e ? e : window.event; 
        //獲取鼠標(biāo)在element元素中的坐標(biāo)值 
        var cxy = windowToCanvas(element,e.clientX,e.clientY); 
        context.save();//保存當(dāng)前繪制環(huán)境 
        //獲取放大鏡 
        getClip(context,cxy.x,cxy.y,diameter/2); 
        //將內(nèi)容放入到放大鏡中顯示 
        //根據(jù)鼠標(biāo)點(diǎn)的坐標(biāo)值計(jì)算出在原圖的坐標(biāo)值 
        var ytx0=img.width/element.width*cxy.x;//計(jì)算出鼠標(biāo)在原圖的X坐標(biāo)值 
        var yty0=img.height/element.height*cxy.y//計(jì)算出鼠標(biāo)在原圖的Y坐標(biāo)值 
        //（原圖形/顯示圖形比例）* （放大鏡直徑/比例= 鏡中的圖形所占大小）= 原圖要截取的圖像大小 
        var ytclipValueW = img.width/element.width*diameter/ratio;//在原圖截取圖片的寬度 
        var ytclipValueH = img.height/element.height*diameter/ratio;//在原圖截取圖片的寬度 
        //.drawImage(圖像對象,原圖像截取的起始X坐標(biāo),原圖像截取的起始Y坐標(biāo),原圖像截取的寬度,原圖像截取的高度， 
        // 繪制圖像的起始X坐標(biāo),繪制圖像的起始Y坐標(biāo),繪制圖像所需要的寬度,繪制圖像所需要的高度); 
        context.drawImage(img,ytx0-ytclipValueW/2,yty0-ytclipValueH/2,ytclipValueW,ytclipValueH,cxy.x-diameter/2,cxy.y-diameter/2,diameter,diameter); 
        context.restore();//恢復(fù)當(dāng)前保存的繪制環(huán)境 
      } 
    } 
 
    /* 
    * 獲取放大鏡框：進(jìn)行圖層切割 
    * context：繪制環(huán)境對象 
    * x:鼠標(biāo)在畫布中的X坐標(biāo) 
    * y:鼠標(biāo)在畫布中的Y坐標(biāo) 
    * r:放大鏡的直徑 
    * */ 
    function getClip(context,x,y,r){ 
      context.beginPath(); 
      context.arc(x,y,r,0,Math.PI*2,false); 
      context.stroke(); 
      context.clip();//沿形狀切除向外的圖層 
    } 
 
 
    /* 
    * 坐標(biāo)轉(zhuǎn)換：將window中的坐標(biāo)轉(zhuǎn)換到元素盒子中的坐標(biāo)，并返回(x,y)坐標(biāo) 
    * element：canvas元素對象 
    * x:鼠標(biāo)在當(dāng)前窗口X坐標(biāo)值 
    * y:鼠標(biāo)在當(dāng)前窗口Y坐標(biāo)值 
    * */ 
    function windowToCanvas(element,x,y){ 
      //獲取當(dāng)前鼠標(biāo)在window中的坐標(biāo)值 
      // alert(event.clientX+"-------"+event.clientY); 
      //獲取元素的坐標(biāo)屬性 
      var box = element.getBoundingClientRect(); 
      var bx = x - box.left; 
      var by = y - box.top; 
      return {x:bx,y:by}; 
    } 
 
  </script> 
</body> 
</html>

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“canvas怎么實(shí)現(xiàn)圖像放大鏡”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

網(wǎng)頁標(biāo)題：canvas怎么實(shí)現(xiàn)圖像放大鏡
瀏覽路徑：http://jinyejixie.com/article16/gpsidg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、網(wǎng)站導(dǎo)航、網(wǎng)站排名、動態(tài)網(wǎng)站、Google、ChatGPT

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

canvas怎么實(shí)現(xiàn)圖像放大鏡