canvas画布实现放大镜

Myth丶恋晨 2021-09-16 04:22 537阅读 0赞

![70][]

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style type="text/css">
    			#cv{
    				border:1px solid;
    			}
    	</style>
    </head>
    <body>
    	<canvas id="cv" width="467" height="491"></canvas>
    </body>
    <script type="text/javascript">
    	var ctx = cv.getContext("2d");
    	var img = new Image();
    	img.src="../3.jpeg";
    	img.onload = function(){
    		ctx.drawImage(img,0,0);
    	}
    	cv.onmousedown=function(e){
    		var e = e|| window.event;
    		var x = e.clientX - cv.offsetLeft;
    		var y = e.clientY-cv.offsetTop;
    		ctx.beginPath();
    		ctx.moveTo(x,y);
    		document.onmousemove=function(e){
    			//canvas中任何绘制的图形移动,都是一直在重新绘制,所以每次绘制之前需要清空画布,避免画布上多次重复绘制
    			cv.width=cv.width;
    			ctx.drawImage(img,0,0);
    			var e = e|| window.event;
    			var x = e.clientX - cv.offsetLeft;
    			var y = e.clientY-cv.offsetTop;
    			console.log(x,y);
    			//将图片剪裁,其中的参数分贝是哪个图片,从xy什么位置开始剪裁,剪裁宽高,剪裁之后要显示的xy位置,以及显示图片的宽高,这个方法剪裁的是原图
    			ctx.drawImage(img,x-40,y-40,80,80,x-80,y-80,160,160);
    			//图形组合,后面写的为源图片,此属性上面为目标图片,这个属性是显示在源图片内部的目标图片,并且源图片透明
    			ctx.globalCompositeOperation="destination-in";
    			ctx.arc(x,y,80,0,Math.PI*2,false);
    			ctx.fill();
    			//添加了源图片之后让目标图片还是完全显示:这行代码可以将目标图片放在最上面
    			ctx.globalCompositeOperation="destination-over";
    			ctx.drawImage(img,0,0);
    		}
    	}
    	//当鼠标抬起的时候,关闭鼠标移动事件
    	cv.onmouseup = function(){
    		document.onmousemove=null;
    		//此刻虽然停止了,但是放大镜还停止在页面上,
    		//让源图片完全显示使用这行代码:将源图片可以提高到所有图片的最上面
    		ctx.globalCompositeOperation="source-over";
    		//将Img作为源图片进行绘制
    		ctx.drawImage(img,0,0);
    	}
    
    
    
    </script>
    </html>

[70]: /images/20210813/ecd507ecc0bd4f0b8f1427c384475803.png