<!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>
利用html5中canvas实现类似淘宝的放大图片效果
最新推荐文章于 2020-12-24 06:28:36 发布