主要采用了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. Hive时间操作[转]

    时间字段格式化 from_unixtime(unix_timestamp(VisitTime),'yyyy-MM-dd') 日期函数UNIX时间戳转日期函数: from_unixtime语法:   f ...

  2. Robots.txt - 禁止爬虫（转）

    Robots.txt - 禁止爬虫 robots.txt用于禁止网络爬虫访问网站指定目录.robots.txt的格式采用面向行的语法:空行.注释行(以#打头).规则行.规则行的格式为:Field: v ...

  3. 3Struts2进阶----青软S2SH(笔记)

    关于上面这个红框里的问题,经过实际测试发现,struts2增加一个命名空间后,jsp页面里所引用的资源的路径,也需要增加一个"../", 于是,跟SpringMVC没啥区别了啊.. ...

  4. 【09-23】js原型继承学习笔记

    js原型继承学习笔记 function funcA(){ this.a="prototype a"; } var b=new funcA(); b.a="object a ...

  5. Coursera-Getting and Cleaning Data-week4-R语言中的正则表达式以及文本处理

    博客总目录:http://www.cnblogs.com/weibaar/p/4507801.html Thursday, January 29, 2015 补上第四周笔记,以及本次课程总结. 第四周 ...

  6. 与或左移右移操作在ARM寄存器配置中的作用

    逻辑运算: 与运算&:与0清零  清零用与运算 或运算 |:或1置一  置一用或运算 异或 ^:不同为1  /*****单个寄存器清零置一*************************** ...

  7. 如何修改 Total commander 配置文件的路径

    在官方主页 http://www.ghisler.com/tools.htm#other 上提供了一个名为 INIreloc.exe  的小程序,它可以变更ini文件的保存位置.

  8. /etc/rc.d/rc与/etc/rc.d/init.d的关系

    在这里先解释一下 /etc/rc.d/init.d 里面放的都是什么东西.这个目录存放的是一些脚本,一般是Linux以rpm包安装时设定的一些服务的启动/关闭脚本.系统在安装时装了好多rpm包,这里面 ...

  9. Android下如何计算两经纬点之间距离

    节选自百度地图API: 若开发者使用的是百度地图或定位API,且版本在1.3.5以后的, 路线规划提供了获取路线距离的方法,见MKRoutePlan 类的 getDistance 方法. 如果是计算任 ...

  10. mapReduce编程之auto complete

    1 n-gram模型与auto complete n-gram模型是假设文本中一个词出现的概率只与它前面的N-1个词相关.auto complete的原理就是,根据用户输入的词,将后续出现概率较大的词 ...