js canvas实现放大镜查看图片功能

时间：2021-05-26

本文实例为大家分享了canvas实现放大镜查看图片功能的具体代码，供大家参考，具体内容如下

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body style="background: black;"><canvas id="myCanvas" style="display: block;margin: 0px auto;border: 10px solid #aaa "> 你的浏览器不支持canvas</canvas><canvas id="offCanvas" style="display: none"></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>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章