利用html5中canvas实现类似淘宝的放大图片效果

最新推荐文章于 2022-12-05 16:20:10 发布

胖水

最新推荐文章于 2022-12-05 16:20:10 发布

阅读量1.4k

点赞数 2

分类专栏： h5+css+js

本文链接：https://blog.csdn.net/pondwater/article/details/86887890

版权

h5+css+js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<!-- 这里定义原始图片，设置鼠标移动到图片上触发的函数，已经离开图片触发的函数 -->
<img id="eagle" onmousemove="maxpicture(event)" onmouseleave="quitPicture(event)"/> 
<!-- 这里设置画板，展示图片放大后的效果图 -->
<div id="mydiv"><canvas id="mcanvas" width="800" height="600"></canvas></div>
<script type="text/javascript">
var image=document.getElementById("eagle");
var divi=document.getElementById("mydiv");
image.src="eagle.jpg";  //原图片地址
var sizefactor=0.3;
//原始图片装载完成后触发的事件，将原图进行了缩放显示
image.onload=function()
{ //获取原始图片的长宽
  var originX=image.width;
  var originY=image.height;
  
  image.width=originX*sizefactor;
  image.height=originY*sizefactor;
 }
//鼠标离开原图触发的事件
image.quitPicture=function(event)
{
    //原图所在的位置是div元素内，因此将canvas元素进行了删除
   	if(divi.hasChildNodes())
	{ divi.removeChild(divi.lastChild);
	}
}
//放大图片触发的时间事件
function maxpicture(event)
{
    var mouseX=event.offsetX; //定位鼠标所在的坐标（图片上坐标）
	var mouseY=event.offsetY;
	if(divi.hasChildNodes())   //这个事件是一个反复触发的过程，因此删除上一次绘制的画板重新绘制
	{ divi.removeChild(divi.lastChild);
	}
	//设置新创建的画板的属性
	var newCanvas=document.createElement("canvas");
	newCanvas.width=500;newCanvas.height=500;
	newCanvas.style.border="0.2px solid black";
	//向div中添加新的画板
	divi.appendChild(newCanvas);
	var newCtx=newCanvas.getContext('2d');
	//画板的区域是500*500，新绘制的大图是1000*1000，所有有一部分被忽略绘制
	//因为绘制所开始的区域是从画板左上方开始绘制，如果想让鼠标所在的点成为画板中心区域，对应原图坐标需要减去250,250
	//又因为原图和画板图片的比例尺为1:2，因此对应原图减去125,125
	newCtx.drawImage(image,(mouseX)/sizefactor-125,(mouseY)/sizefactor-125,500,500,0,0,1000,1000);
	
}

</script>

</body>

</html>

胖水

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
利用html5中canvas实现类似淘宝的放大图片效果

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;/head&gt;&lt;body&gt;&lt;!-- 这里定义原始图片，设置鼠标移动到图片上触发的函数，已经离开图片触发的函数 --&gt;&lt;img id="eagle" onmousemove="maxpicture(event)" onmou
复制链接

扫一扫