canvas 图片鼠标区域放大细节

最新推荐文章于 2024-03-29 17:03:34 发布

朱宝鑫

最新推荐文章于 2024-03-29 17:03:34 发布

阅读量2k

点赞数

分类专栏： canvas

本文链接：https://blog.csdn.net/qq_30529627/article/details/51222503

版权

canvas 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何利用HTML5的canvas元素实现图片的鼠标区域放大功能，详细讲解了相关技术点，包括监听鼠标事件、获取鼠标位置、绘制放大图像等步骤，帮助读者理解并实现图片细节查看的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>图片鼠标区域放大细节</title>
	</head>
	<style>
		body{background: #666;margin: 0;padding: 0;	}
		input{
		    display: block;
		    margin: 20px auto;
    		}

	</style>
	<body>
		<canvas id="kycanvas" style="display: block;margin:0 auto; border: 1px solid darksalmon;margin-top: 100px;">
			当前浏览器不支持canvas，请更换浏览器后再试！
		</canvas>
		<canvas id="offCanvas" style="display: none;"></canvas>
	</body>
	<script>
		var canvas = document.getElementById("kycanvas");//选取画布
		var context = canvas.getContext("2d");//创建context对象
		
		var offCanvas = document.getElementById("offCanvas");//选取画布
		var offContext = offCanvas.getContext("2d");//创建context对象
		var scale;
		var image = new Image();
		var isMouseDown = false;
		window.onload = function (){
			canvas.width = 400;//画布宽
			canvas.height = 400;	//画布高	
			image.src = "images/im1.jpg";//图片地址
			image.onload = function(){ //图片加载完毕
				offCanvas.width = image.width;
				offCanvas.height = image.height;
				scale = offCanvas.width / canvas.width;
				context.drawImage(image,0,0,canvas.width,canvas.height);
				offContext.drawImage(image,0,0);
			};
		};
		function windowToCanvas(x,y){//获取画布上坐标点
			var bbox = canvas.getBoundingClientRect();
			return { x : x - bbox.left , y : y - bbox.top };
		};
		canvas.onmousedown = function (e){
			e.preventDefault(); //去默认事件
			var point = windowToCanvas(e.clientX , e.clientY); 
			console.log(point.x , point.y);
			isMouseDown = true;
			drawCanvasWithMagnifier(true , point)
		};
		canvas.onmousemove = function (e){
			e.preventDefault(); //去默认事件
			if(isMouseDown == true){
				var point = windowToCanvas(e.clientX , e.clientY); 
				console.log(point.x , point.y);	
				drawCanvasWithMagnifier(true , point)
			}
		};
		canvas.onmouseup = function (e){
			e.preventDefault(); //去默认事件
			isMouseDown = false;
			drawCanvasWithMagnifier(false);
		};		
		canvas.onmouseout = function (e){
			e.preventDefault(); //去默认事件
			isMouseDown = false;
			drawCanvasWithMagnifier(false);
		};		
		function drawCanvasWithMagnifier(isShowMagnifier , point){
			context.clearRect(0,0,canvas.width,canvas.height);
			context.drawImage(image,0,0,canvas.width,canvas.height);
			if(isShowMagnifier == true){
				drawMagnifier(point);
			}
		}
		function drawMagnifier(point){
			var imageLG_cx = point.x * scale;
			var imageLG_cy = point.y * scale;
			var mr = 100;
			var sx = imageLG_cx - mr;
			var sy = imageLG_cy - mr;
			
			var dx = point.x - mr;
			var dy = point.y - mr;
			
			
			context.drawImage(offCanvas, sx , sy , 2*mr , 2*mr , dx , dy , 2*mr , 2*mr);
			
		}
	</script>
</html>