JavaScript+HTML5 canvas实现放大镜效果完整示例


Posted in Javascript onMay 15, 2019

本文实例讲述了JavaScript+HTML5 canvas实现放大镜效果。分享给大家供大家参考,具体如下:

效果:

JavaScript+HTML5 canvas实现放大镜效果完整示例

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>3water.com canvas放大镜</title>
  <style>
    #copycanvas {
      border: 1px solid #000;
      display: none;
    }
    #square {
      width: 90px;
      height: 90px;
      background-color: #cc3;
      border: 1px solid #f00;
      opacity: 0.5;
      position: absolute;
      z-index: 999;
      display: none;
      cursor: crosshair;
    }
  </style>
</head>
<body>
<canvas id="canvas" width="450" height="676"></canvas>
<canvas id="copycanvas" width="300" height="300"></canvas>
<div id="square"></div>
<script>
  var canvas = document.getElementById('canvas'), //获取canvas对象
      context = canvas.getContext('2d'), //获取上下文
      copycanvas = document.getElementById('copycanvas'), //获取copycanvas
      copycontext = copycanvas.getContext('2d'),
      square = document.getElementById('square'), //获取透明框
      squaredata = {}, //用来保存选择框数据
      box = canvas.getBoundingClientRect();
  //getBoundingClientRect方法可以获取元素上、下、左、右分别相对浏览器的坐标位置
  //创建图像对象,并加载
  image = new Image();
  image.src = "3.jpg";
  image.onload = function(){
    context.drawImage(image,0,0,canvas.width,canvas.height);
  };
  canvas.onmouseover = function(e){
    var x = e.clientX, //获取鼠标实时坐标
        y = e.clientY;
    createSquare(x,y); //保存透明选择框属性
  };
  window.onmousemove = function(e){
    var x = e.clientX,
        y = e.clientY;
    //判断鼠标是否移出canvas
    if(x >= canvas.offsetLeft && x <= canvas.offsetLeft + canvas.width &&
        y >= canvas.offsetTop && y <= canvas.offsetTop + canvas.height){
      createSquare(x,y);
    }else{
      hideSquare();
      hideCanvas();
    }
  }
  function showSquare(){
    square.style.display = 'block';
  }
  function hideSquare(){
    square.style.display = 'none';
  }
  function showCanvas(){
    copycanvas.style.display = "inline";
  }
  function hideCanvas(){
    copycanvas.style.display = "none";
  }
  function createSquare(x,y){
    //控制选择框不移动出canvas
    x = x - 45 < canvas.offsetLeft ? canvas.offsetLeft:x - 45;
    y = y - 45 < canvas.offsetTop ? canvas.offsetTop:y - 45;
    x = x + 90 < box.right ? x:box.right - 90;
    y = y + 90 < box.bottom ? y:box.bottom - 90;
    squaredata.left = x;
    squaredata.top = y;
    moveSquare(x,y);
  }
  function moveSquare(x,y){
    square.style.left = x + "px";
    square.style.top = y + "px";
    showCanvas();
    showSquare();
    copy();
  }
  function copy(){
    copycontext.drawImage(
        canvas,
        squaredata.left - box.left,
        squaredata.top - box.top,
        90,
        90,
        0,
        0,
        copycanvas.width,
        copycanvas.height
    );
  }
</script>
</body>
</html>

感兴趣的朋友可使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试一下运行效果。

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript小数计算出现近似值的解决办法
Feb 06 Javascript
js Array对象的扩展函数代码
Apr 24 Javascript
火狐textarea输入法的bug的触发及解决
Jul 24 Javascript
js字符串转成JSON
Nov 07 Javascript
javascript简单实现等比例缩小图片的方法
Jul 27 Javascript
WEB开发之注册页面验证码倒计时代码的实现
Dec 15 Javascript
weex里Vuex state使用storage持久化详解
Sep 09 Javascript
vue cli 3.0 使用全过程解析
Jun 14 Javascript
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
Sep 25 Javascript
详解KOA2如何手写中间件(装饰器模式)
Oct 11 Javascript
深入了解JavaScript 的 WebAssembly
Jun 15 Javascript
Node.js开发之套接字(socket)编程入门示例
Nov 05 Javascript
详解微信UnionID作用
May 15 #Javascript
小程序:授权、登录、session_key、unionId的详解
May 15 #Javascript
javascript+HTML5 canvas绘制时钟功能示例
May 15 #Javascript
详解小程序用户登录状态检查与更新实例
May 15 #Javascript
基于vue如何发布一个npm包的方法步骤
May 15 #Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
May 15 #Javascript
JavaScript页面倒计时功能完整示例
May 15 #Javascript
You might like
PHP原生模板引擎 最简单的模板引擎
2012/04/25 PHP
thinkPHP中U方法加密传递参数功能示例
2018/05/29 PHP
使用PHP开发留言板功能
2019/11/19 PHP
利用JS自动打开页面上链接的实现代码
2011/09/25 Javascript
js获取判断上传文件后缀名的示例代码
2014/02/19 Javascript
jQuery实现不断闪烁文字的方法
2015/05/15 Javascript
js实现网页收藏功能
2015/12/17 Javascript
JavaScript中this的用法及this在不同应用场景的作用解析
2017/04/13 Javascript
AngularJS实现controller控制器间共享数据的方法示例
2017/10/30 Javascript
原生js实现仿window10系统日历效果的实例
2017/10/31 Javascript
vue 界面刷新数据被清除 localStorage的使用详解
2018/09/16 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
2019/08/28 Javascript
Vue和React有哪些区别
2020/09/12 Javascript
electron踩坑之remote of undefined的解决
2020/10/06 Javascript
python中的函数用法入门教程
2014/09/02 Python
Python3中的2to3转换工具使用示例
2015/06/12 Python
Python中查看文件名和文件路径
2017/03/31 Python
python数据结构链表之单向链表(实例讲解)
2017/07/25 Python
python Socket之客户端和服务端握手详解
2017/09/18 Python
利用arcgis的python读取要素的X,Y方法
2018/12/22 Python
Python交互式图形编程的实现
2019/07/25 Python
Python 爬虫实现增加播客访问量的方法实现
2019/10/31 Python
150行Python代码实现带界面的数独游戏
2020/04/04 Python
Python-openCV开运算实例
2020/07/05 Python
css3选择器基本介绍
2014/12/15 HTML / CSS
基于CSS3 animation动画属性实现轮播图效果
2017/09/12 HTML / CSS
HTML5 File接口在web页面上使用文件下载
2017/02/27 HTML / CSS
利用三角函数在canvas上画虚线的方法
2018/01/11 HTML / CSS
美国紧身牛仔裤品牌:NYDJ
2017/05/24 全球购物
美国战术品牌:5.11 Tactical
2019/05/01 全球购物
英国电子专家:maplin
2019/09/04 全球购物
马来西亚网上花店:FlowerAdvisor马来西亚
2020/01/03 全球购物
红旗方阵解说词
2014/02/12 职场文书
高中生的自我评价
2014/03/04 职场文书
美术教师求职信范文
2015/03/20 职场文书
西游降魔篇观后感
2015/06/15 职场文书