canvas實現(xiàn)圖像放大鏡

更新時間：2017年02月06日 15:51:57 投稿：lijiao

這篇文章主要為大家詳細為大家詳細介紹了canvas實現(xiàn)圖像放大鏡的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了canvas實現(xiàn)圖像放大鏡的具體代碼，供大家參考，具體內容如下

<!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); 
      //鼠標在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; 
        //獲取鼠標在element元素中的坐標值 
        var cxy = windowToCanvas(element,e.clientX,e.clientY); 
        context.save();//保存當前繪制環(huán)境 
        //獲取放大鏡 
        getClip(context,cxy.x,cxy.y,diameter/2); 
        //將內容放入到放大鏡中顯示 
        //根據(jù)鼠標點的坐標值計算出在原圖的坐標值 
        var ytx0=img.width/element.width*cxy.x;//計算出鼠標在原圖的X坐標值 
        var yty0=img.height/element.height*cxy.y//計算出鼠標在原圖的Y坐標值 
        //（原圖形/顯示圖形比例）* （放大鏡直徑/比例= 鏡中的圖形所占大小）= 原圖要截取的圖像大小 
        var ytclipValueW = img.width/element.width*diameter/ratio;//在原圖截取圖片的寬度 
        var ytclipValueH = img.height/element.height*diameter/ratio;//在原圖截取圖片的寬度 
        //.drawImage(圖像對象,原圖像截取的起始X坐標,原圖像截取的起始Y坐標,原圖像截取的寬度,原圖像截取的高度， 
        // 繪制圖像的起始X坐標,繪制圖像的起始Y坐標,繪制圖像所需要的寬度,繪制圖像所需要的高度); 
        context.drawImage(img,ytx0-ytclipValueW/2,yty0-ytclipValueH/2,ytclipValueW,ytclipValueH,cxy.x-diameter/2,cxy.y-diameter/2,diameter,diameter); 
        context.restore();//恢復當前保存的繪制環(huán)境 
      } 
    } 
 
    /* 
    * 獲取放大鏡框：進行圖層切割 
    * context：繪制環(huán)境對象 
    * x:鼠標在畫布中的X坐標 
    * y:鼠標在畫布中的Y坐標 
    * r:放大鏡的直徑 
    * */ 
    function getClip(context,x,y,r){ 
      context.beginPath(); 
      context.arc(x,y,r,0,Math.PI*2,false); 
      context.stroke(); 
      context.clip();//沿形狀切除向外的圖層 
    } 
 
 
    /* 
    * 坐標轉換：將window中的坐標轉換到元素盒子中的坐標，并返回(x,y)坐標 
    * element：canvas元素對象 
    * x:鼠標在當前窗口X坐標值 
    * y:鼠標在當前窗口Y坐標值 
    * */ 
    function windowToCanvas(element,x,y){ 
      //獲取當前鼠標在window中的坐標值 
      // alert(event.clientX+"-------"+event.clientY); 
      //獲取元素的坐標屬性 
      var box = element.getBoundingClientRect(); 
      var bx = x - box.left; 
      var by = y - box.top; 
      return {x:bx,y:by}; 
    } 
 
  </script> 
</body> 
</html>

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

您可能感興趣的文章: