<!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中的畫圖環境 var context = canvas.getContext('2d'); var img = new Image(); img.src = "./image/liuyifei.jpg"; window.onload = function(){ //獲取放大鏡 getfangdajing(context,canvas,img,150,2); } /* * context:繪制環境對象, * 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中移動觸發事件 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();//保存當前繪制環境 //獲取放大鏡 getClip(context,cxy.x,cxy.y,diameter/2); //將內容放入到放大鏡中顯示 //根據鼠標點的坐標值計算出在原圖的坐標值 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();//恢復當前保存的繪制環境 } } /* * 獲取放大鏡框：進行圖層切割 * context：繪制環境對象 * 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>
新聞熱點
疑難解答
