主要采用了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. C语言基础(4)-原码,反码,补码及sizeof关键字

    1. 原码 +7的原码是0000 0111 -7的原码是1000 0111 +0的原码是0000 0000 -0的原码是1000 0000 2. 反码 一个数如果值为正,那么反码和原码相同. 一个数如 ...

  2. 封装自己的Common.js工具库

    Code/** * Created by LT on 2013/6/16. * Common.js * 对原生JS对象的扩展 * Object.Array.String.Date.Ajax.Cooki ...

  3. sql中case when语句的使用-来自网摘文章

    Case具有两种格式.简单Case函数和Case搜索函数. --简单Case函数 CASE sex WHEN '1' THEN '男' WHEN '2' THEN '女' ELSE '其他' END ...

  4. shell--1.shell 相关及变量

    1.shell脚本解释器 Bourme Shell (/usr/bin/sh 或 /bin/sh ) Bourme Again Shell ( /bin/bash ) C Shell ( /usr/b ...

  5. sharepoint OWA问题解决

    请检查DNS   检查域名解析   cmd----nslookup---输入IP或者域名(计算机名)可以看到

  6. PowerDesigner使用

    首先我们需要创建一个测试数据库,为了简单,我们在这个数据库中只创建一个Student表和一个Major表.其表结构和关系如下所示. 看看怎样用PowerDesigner快速的创建出这个数据库吧. 1. ...

  7. 7.openstack之mitaka搭建dashboard

    部署控制面板dashboard 控制节点 1.安装软件包 yum install openstack-dashboard -y 2.配置 vim /etc/openstack-dashboard/lo ...

  8. iOS compare 字符串比较

    NSString 比较字符串,我介绍一些常用的方法: NSString *value = @"1234567890"; 比较的方法: [value compare:(NSStrin ...

  9. float 比较， 这是一个坑

    为了方便随机关键产品数据,做了一个随机值列的方案,列字段类型设置为float. 在测试的两个随机值的时候, 故意设置了几个随机值相同保存到数据库表中, 这样问题就出来了. 详细如下: 当进行小于比较的 ...

  10. MAC 远程桌面链接 证书或链接无效

    RDC --> 首选项  -->  安全性 --> 勾选即使验证失败也要链接.   问题解决.