主要采用了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. Debian 8中dpkg -i自动解决依赖关系

    dpkg -i 后#apt-get update &&apt-get -f install

  2. [Nhibernate]sqlite数据库基本使用

    目录 写在前面 操作步骤 总结 写在前面 昨天有朋友问我在nhibernate中如何使用sqlite数据库,当时实在忙的不可开交,下周要去山西出差,实在没空,按我的说法使用sqlite跟使用sqlse ...

  3. Shader 学习笔记

    Shader "Custom/Diffuse Texture" { // Shader的开始,双引号内饰该Shader的名字 Properties { _MainTex (&quo ...

  4. 【荐】如何正确理解PHP之include，include_once，require，require_once等包含作用域

    我们为大家总结的PHP include作用域的问题包括:PHP include 变量作用域和函数.类的作用域等方面的问题.希望对大家有所帮助. 很多程序员在使用PHP语言进行实际编程时,通常只会关注P ...

  5. 笨办法学Python (exercise1-15)

    #exercise1print "Hello world!"print "Hello Again"print "I like typing this. ...

  6. 使用ajax技术实现txt弹出在页面上

    使用ajax技术实现txt弹出在页面上   使用ajax技术实现点击按钮,将TXT文本里的内容通过弹出框显示到页面上 /*事件会在页面加载完成后触发.*/ <script> window. ...

  7. php自动加载

    初學PHP時,最早會面對的問題之一就是require與include差別何在?require_once與include_once又是什麼?弄懂這些問題之後,如果不使用framework,直接開發,便常 ...

  8. python之路八

    socket实现简单的FTP server端: import socket,osserver = socket.socket()server.bind(("localhost",9 ...

  9. Python: zip函数

    zip函数接受任意多个(包括0个和1个)序列作为参数,返回一个tuple列表. 参考链接解释

  10. 关于js实现分页效果的简单代码

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...