使用h5API的画布实现放大镜的功能

最新推荐文章于 2023-05-08 18:19:24 发布

lancela

最新推荐文章于 2023-05-08 18:19:24 发布

阅读量427

点赞数

文章标签： h5api

本文链接：https://blog.csdn.net/qq_39174924/article/details/98677256

版权

使用h5API的画布实现放大镜的功能

实现思路
鼠标滑过，获取鼠标所在的点(event.clientX screenX)，获取左上角点。方形区域，放大。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>放大镜</title>
	<style>
		*{
			margin:0;
			padding: 0px;
		}
		.parent{
			border:1px solid red;
			position: relative;
			width: 400px;
			height: 400px;
		}
		canvas{
			border:1px solid pink;
		}
		#big-canvas{
			position: absolute;
			left: 400px;
			top:100px;
			/*display: none;*/
		}
		#bd-canvas{
			position: absolute;
			left: 0;
			top: 0;
			opacity: 0.6;
			display: none;
			background-color: pink;
			z-index: 2;
			width:80px;
			height: 80px;
		}
	</style>
	<script>
		window.onload = function(){
			var parent = document.getElementsByClassName('parent')[0];
			console.log(parent.offsetLeft);
			console.log(parent.offsetTop);
			// 获取convas和context
			var canvas = document.getElementById('canvas');
			var context = canvas.getContext('2d');
			var bigCanvas = document.getElementById('big-canvas');
			var bigContext = bigCanvas.getContext('2d');
			var bdCanvas = document.getElementById('bd-canvas');
			var bdContext = bdCanvas.getContext('2d');
			
			//绘制 第一个 canvas 中的图片
			var img = new Image();
			img.src = './images/2.JPG';
			img.onload = function(){
				context.drawImage(img,0,0,400,400);
			}
			//绘制第三个 bgCanvas的波点的图片
			var img2 = new Image();
			img2.src = './images/bd.jpg';
			img2.onload = function(){
			bdContext.drawImage(img2,0,0,80,80);
			 }
		
			//在光标移入绘有图片的画布上是触发事件
			canvas.onmousemove = function(){
				// 显示第二个和第三个画布
				bigCanvas.style.display = 'block';
				bdCanvas.style.display='block';
				// var sx = event.clientX;
				// var sy =event.clientY;
				var sx = event.pageX-parent.offsetLeft - 40;
				var sy =event.pageY- parent.offsetTop - 40;
				// 判断边界条件 ,
				sx<0?sx=0:sx=sx;
				sy<0?sy=0:sy=sy;
				sx>320?sx=320:sx=sx;
				sy>320?sy=320:sy=sy;
				// 清空bigContext画布
				bigContext.clearRect(0,0,200,200);
				bigContext.drawImage(canvas,sx,sy,80,80,0,0,200,200);
				// 控制波点画布的位置
				bdCanvas.style.left = sx+'px';
				bdCanvas.style.top = sy+'px';
			};
			// console.log(parent);
			// 光标离开时设置bigCanvas bdCanvas两个隐藏
			parent.onmouseleave = function(){
				// console.log(event.screenX,screenY); 
				bigCanvas.style.display = 'none';
				bdCanvas.style.display = 'none';
			}

		};
	</script>
</head>
<body>
	<div class="parent">
		<!-- 原图 -->
		<canvas id="canvas" width="400px" height="400px"> </canvas>
		<!-- 放大区域 内容跟鼠标变-->
		<canvas id="big-canvas" width="200px" height="200px"></canvas>
		<!-- 半透明的波点,位置跟鼠标变 -->
		<canvas id="bd-canvas" width="80px" height="80px"></canvas>
	</div>
</body>
</html>

效果展示
在这里插入图片描述