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

<!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,125newCtx.drawImage(image,(mouseX)/sizefactor-125,(mouseY)/sizefactor-125,500,500,0,0,1000,1000);}</script></body></html>

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

仿淘宝商品放大展示效果制作（放大镜效果）
如果您觉得这篇文章有用,欢迎点赞收藏或有什么建议请在评论区留言,我看到后会第一时间回复的,谢谢! (分享时刻) mac上取色比较好用的小工具:啜色: 好用的截屏小工具:Snipaste (常用的一个功 ...
React实现类似淘宝tab居中切换效果
效果 DOM布局 const label = {lettersort: false,paramname: "label",paramid: 0,title: "车源列表筛 ...
H5类似淘宝头条垂直滚动效果
不同样式的垂直滚动: 无缝垂直滚动: 间歇性垂直滚动(一次滚动一条): 间歇性垂直滚动(一次滚动两条): 变量解释: speed:滚动的速度: delay:暂停的时长: scrollTop :滚动的高 ...
php代码输出笑脸,利用HTML5中的Canvas绘制笑脸的代码
这篇文章主要介绍了利用HTML5中的Canvas绘制一张笑脸的教程,使用Canvas进行绘图是HTML5中的基本功能,需要的朋友可以参考下今天,你将学习一项称为Canvas(画布)的web技术,以及 ...
html页面画虚线,HTML5中canvas怎么画虚线
HTML5中canvas如何画虚线虚线也可以看成是一段段的实线组成的,而实线是利用context.moveTo(x,y);context.lineTo(x2,y2);context.stroke() ...
关于中国大学mooc嵩天老师课程中定向爬取淘宝产品信息
关于中国大学mooc嵩天老师课程中定向爬取淘宝产品信息 python小白最近看老师课程,发现淘宝网页升级了,用以前的代码爬不了,查找了很多资料后发现了一些缺陷,在此分享给大家老师的代码大体上没问题, ...
VUE类似淘宝选择商品多规格(库存判断)
1.组件效果展示也可访问链接查看网页效果... 后面又用uni-app写过一次,比这次稍微清晰一些 uni-app类似淘宝选择商品多规格(库存判断) 瞎封装组件系列: VUE简单提示框 VUE树形图 ...
App 金刚区导航菜单，类似淘宝、QQ 音乐等 APP 导航，方格布局横向滑动翻页带滚动条
TransformersLayout 项目地址:zaaach/TransformersLayout 简介: :fire: App 金刚区导航菜单,类似淘宝.QQ 音乐等 APP 导航,方格布局横向滑 ...
vue 实现类似淘宝的商品详情页的商品展示
vue 实现类似淘宝的商品详情页的商品展示利用vue和swiper实现缩略图控制 / Swiper互相控制具体需求描述: 图片大图自动轮播展示,下面的缩略图跟着变化,点击小图切换到对应的大图,大图 ...

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

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

最新文章

热门文章