這篇文章主要介紹了canvas怎么實現圖像放大鏡，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
具體內容如下
<!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>感謝你能夠認真閱讀完這篇文章，希望小編分享的“canvas怎么實現圖像放大鏡”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
