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

更新时间：2019年05月15日 09:57:29 作者：辣姐什么鬼

这篇文章主要介绍了JavaScript+HTML5 canvas实现放大镜效果,结合完整实例形式分析了javascript+HTML5 canvas针对图片元素的获取、响应鼠标事件变换元素属性相关操作技巧,需要的朋友可以参考下

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

效果：

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>www.jb51.net 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.jb51.net/code/HtmlJsRun测试一下运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript图片操作技巧大全》、《JavaScript运动效果与技巧汇总》、《JavaScript+HTML5特效与技巧汇总》、《JavaScript图形绘制技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

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

您可能感兴趣的文章:

如何设置iframe高度自适应在跨域情况下的可用方法
iframe的高度需要根据子页面的实际高度来进行调整，但是如果子页面不在同一域中怎么办？这时候脚本没有办法获取到子页面的高度，存在JavaScript跨域的问题
2013-09-09
JS学习笔记之原型链和利用原型实现继承详解
这篇文章主要介绍了JS学习笔记之原型链和利用原型实现继承,结合实例形式详细分析了javascript原型链以及利用原型实现继承的相关操作技巧与注意事项,需要的朋友可以参考下
2019-05-05
解决layui的使用以及针对select、radio等表单组件不显示的问题
今天小编就为大家分享一篇解决layui的使用以及针对select、radio等表单组件不显示的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
JS获取select的value和text值的简单实例
本篇文章主要是对JS获取select的value和text值的简单实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-02-02
深入理解Javascript箭头函数中的this
ES6标准新增了一种新的函数：Arrow Function（箭头函数）。那么下面这篇文章主要给大家介绍了箭头函数中this的相关资料，有需要的朋友可以参考借鉴，下面来一起看看吧。
2017-02-02
JavaScript统计数组中相同的数量的方法总结
在JavaScript中，我们经常需要对数组中对象的属性进行统计。在本文中，我们将介绍如何使用JavaScript来实现这一功能，文中有详细的代码示例，需要的朋友可以借鉴参考
2023-05-05
js使用child_process模块操作cmd命令
这篇文章主要给大家介绍了关于js使用child_process模块操作cmd命令的相关资料,在JavaScript中执行CMD命令非常灵活,可以执行任何CMD命令,例如:复制、移动、删除文件等等,需要的朋友可以参考下
2024-01-01
JS分页控件可用于无刷新分页
今天无意看到了这个分页控件，不过使用方法不是很清楚没有研究，。大家可以自行研究，里面的函数写法倒是不错，需要内容的结合
2013-07-07
详解Require.js与Sea.js的区别
RequireJS 和 Sea.js 都是模块加载器，倡导模块化开发理念，核心价值是让 JavaScript 的模块化开发变得简单自然。这篇文章给大家简单介绍了Require.js与Sea.js的区别，感兴趣的朋友一起看看吧
2018-08-08
JS中的回调函数(callback)讲解
回调函数是一段可执行的代码段，它作为一个参数传递给其他的代码，其作用是在需要的时候方便调用这段（回调函数）代码,这篇文章主要介绍了JS中的回调函数（callback）,需要的朋友可以参考下
2022-12-12