主要采用了canvas内渲染canvas的技术，还有利用比例来放大图片

比例：放大镜宽度/画布宽度=原图宽度/渲染图宽度

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>放大镜效果canvas实现</title>
<style>
*{
 margin: 0;
 padding: 0;
}
#canvas{
 position: absolute;
 left: 50%;
 top: 50%;
 -webkit-transform: translate3d(-50%,-50%,0);
 transform: translate3d(-50%,-50%,0);
 cursor:none;
}
</style>
</head>
<body>
 <canvas id="canvas"></canvas>
 <canvas id="zoom" style="display:none"></canvas>
 <script>
 var cvs=document.querySelector("#canvas");
 var zm=document.querySelector("#zoom");
 var ctx=cvs.getContext("2d");
 var ztx=zm.getContext("2d");
 var img=new Image();
 var scale=3;
 var magR=150;
 img.src="data:images/loli.jpg";
 img.onload=function(){
 cvs.width=img.width/scale;
 cvs.height=img.height/scale;
 zm.width=img.width;
 zm.height=img.height;
 ctx.drawImage(img,0,0,cvs.width,cvs.height);
 ztx.drawImage(img,0,0,zm.width,zm.height);
 cvs.onmousemove=function(e){
 var x=e.clientX-getBox(cvs).left;
 var y=e.clientY-getBox(cvs).top;
 var w=h=magR*2;
 var sx=x*scale-magR;
 var sy=y*scale-magR;
 var dx=x-magR;
 var dy=y-magR;
 ctx.drawImage(img,0,0,cvs.width,cvs.height);
 ctx.save();
 ctx.lineWidth=2;
 ctx.strokeStyle="#000";
 ctx.beginPath();
 ctx.arc(x,y,magR,0,Math.PI*2,false);
 ctx.stroke();
 ctx.clip();
 ctx.drawImage(zm,sx,sy,w,h,dx,dy,w,h);
 ctx.restore();
}
 cvs.onmouseout=function(){
  ctx.clearRect(0,0,cvs.width,cvs.height);
  ctx.drawImage(img,0,0,cvs.width,cvs.height);
}
 function getBox(canvas){
  return canvas.getBoundingClientRect();
}
}
</script>
</body>
</html>

演示地址 zoom

酷炫放大镜canvas实现的更多相关文章

  1. 简单酷炫的Canvas数字时钟

    声明:本文为原创文章,如需转载,请注明来源WAxes,谢谢! 我记得很早之前就看过这个DEMO,是岑安大大博客里看到的: 就是这个数字时钟,当时觉得这个创意不错,但是也没去折腾.直到昨天同事又在网上看 ...

  2. 简单酷炫的canvas动画

    作为一个新人怀着激动而紧张的心情写了第一篇帖子还请大家多多支持,小弟在次拜谢. 驯鹿拉圣诞老人动画效果图如下 html如下: <div style="width:400px;heigh ...

  3. HTML5 Canvas玩转酷炫大波浪进度图

    如上图所见,本文就是要实现上面那种效果. 由于最近AlloyTouch要写一个下拉刷新的酷炫loading效果.所以首选大波浪进度图. 首先要封装一下大波浪图片进度组件.基本的原理是利用Canvas绘 ...

  4. html5+Canvas实现酷炫的小游戏

    最近除了做业务,也在尝试学习h5和移动端,在这个过程中,学到了很多,利用h5和canvas做了一个爱心鱼的小游戏.点这里去玩一下 PS: 貌似有点闪屏,亲测多刷新两下就好了==.代码在本地跑都不会闪, ...

  5. 8个经典炫酷的HTML5 Canvas动画欣赏

    HTML5非常强大,尤其是Canvas技术的应用,让HTML5几乎可以完成所有Flash能完成的效果.本文精选了8个经典炫酷的HTML5 Canvas动画欣赏,每一个都提供全部的源代码,希望对你有所帮 ...

  6. Canvas+Video打造酷炫播放体验

    一.简介 直到现在,仍然不存在一项旨在网页上显示视频的标准. 今天,大多数视频是通过插件(比如 Flash)来显示的.然而,并非所有浏览器都拥有同样的插件. HTML5 规定了一种通过 video 元 ...

  7. canvas实现酷炫气泡效果

    canvas实现动画主要是靠设置定时器(setinterval())和定时清除画布里的元素实现,canvas动画上手很简单,今天可以自己动手来实现一个酷炫气泡效果. 气泡炸裂效果(类似水面波纹) 代码 ...

  8. 开源造轮子：一个简洁，高效，轻量级，酷炫的不要不要的canvas粒子运动插件库

    一:开篇 哈哈哈,感谢标题党的莅临~ 虽然标题有点夸张的感觉,但实际上,插件库确实是简洁,高效,轻量级,酷炫酷炫的咯.废话不多说,先来看个标配例子吧: (codepen在线演示编辑:http://co ...

  9. Android常用酷炫控件(开源项目)github地址汇总

    转载一个很牛逼的控件收集帖... 第一部分 个性化控件(View) 主要介绍那些不错个性化的 View,包括 ListView.ActionBar.Menu.ViewPager.Gallery.Gri ...

随机推荐

  1. SVN和Git下载地址

    SVN: TortoiseSVN:https://tortoisesvn.net/downloads.html (安装包和语言) Git: Git for Windows:https://git-fo ...

  2. 几款开源ESB总线的比较

    现有的开源ESB总线中,自从2003年第一个开源总线Mule出现后,现在已经是百花争鸣的景象了.现在我就对现有的各种开源ESB总线依据性能.可扩展性.资料文档完整程度以及整合难易程度等方面展开. CX ...

  3. [NHibernate]存储过程的使用（二）

    目录 写在前面 文档与系列文章 创建对象 更新对象 总结 写在前面 上篇文章介绍了如何使用MyGeneration代码生成器生成存储过程,以及nhibernate中通过存储过程删除数据的内容,这篇文章 ...

  4. golang笔记——函数与方法

    如果你遇到没有函数体的函数声明,表示该函数不是以Go实现的. package math func Sin(x float64) float //implemented in assembly lang ...

  5. DTD总结

    DTD 可以检测 XNM 文档的结构是否正确,就好像文章中用来保证结构正确的语法规则一样. 引入 DTD 1.引入私有的 DTD 文件,URI 可以使相对地址或绝对地址 <!DOCTYPE 根元 ...

  6. 【荐】PHP Session和Cookie，Session阻塞，Session垃圾回收，Redis共享Session，不推荐Memcached保存Session

    什么是 Session 在 web 应用开发中,Session 被称为会话.主要被用于保存某个访问者的数据. 由于 HTTP 无状态的特点,服务端是不会记住客户端的,对服务端来说,每一个请求都是全新的 ...

  7. PHP导出数据到CSV文件函数 csv_export()

    后台往往需要导出各种数据到 Excel文档中.通常我们是导出 .csv文件格式,PHP导出函数参考代码如下: /** * 导出数据到CSV文件 * * @param array $data 二维数组( ...

  8. PHP图像裁剪为任意大小的图像，图像不变形，不留下空白

    <?php /** * 说明:函数功能是把一个图像裁剪为任意大小的图像,图像不变形 * 参数说明:输入 需要处理图片的 文件名,生成新图片的保存文件名,生成新图片的宽,生成新图片的高 */ fu ...

  9. T-SQL 语句的理解

    1.T-SQL中各子句在逻辑上按照以下顺序进行处理 . . . .. .ORDER BY 查询实例: SELECT EMPID, YEAR(ORDERDATE) AS ORDERYEAR, COUNT ...

  10. 【JSOI2010】Group 部落划分 BZOJ 1821

    1821: [JSOI2010]Group 部落划分 Group Time Limit: 10 Sec  Memory Limit: 64 MB     聪聪研究发现,荒岛野人总是过着群居的生活,但是 ...