溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下js+canvas實現放大鏡查看圖片功能的示例，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
具體內容如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body >
<canvas id="myCanvas" >
你的瀏覽器不支持canvas
</canvas>
<canvas id="offCanvas" ></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>1.可以使網頁具有交互性，例如響應用戶點擊，給用戶提供更好的體驗。 2.可以處理表單，檢驗用戶的輸入，并提供及時反饋節省用戶時間。 3.可以根據用戶的操作，動態的創建頁面。 4使用JavaScript可以通過設置cookie存儲在瀏覽器上的一些臨時信息。
以上是“js+canvas實現放大鏡查看圖片功能的示例”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
