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(AJAX)解析XML的代码(兼容FIREFOX/IE)
Jul 11 Javascript
使用jQuery+HttpHandler+xml模拟一个三级联动的例子
Aug 09 Javascript
教你如何使用node.js制作代理服务器
Nov 26 Javascript
第一次接触神奇的Bootstrap菜单和导航
Aug 01 Javascript
微信小程序实现锚点定位楼层跳跃的实例
May 18 Javascript
微信小程序如何获取用户信息
Jan 26 Javascript
js Element Traversal规范中的元素遍历方法
Apr 19 Javascript
通过封装scroll.js 获取滚动条的值
Jul 13 Javascript
Vue加载json文件的方法简单示例
Jan 28 Javascript
uni-app之APP和小程序微信授权方法
May 09 Javascript
js实现无刷新监听URL的变化示例代码详解
Jun 03 Javascript
vue-路由精讲 二级路由和三级路由的作用
Aug 06 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代码技巧的小结
2013/06/02 PHP
举例详解PHP脚本的测试方法
2015/08/05 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
Js动态创建div
2008/09/25 Javascript
JQuery 无废话系列教程(二) jquery实战篇上
2009/06/23 Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
2012/10/11 Javascript
在子窗口中关闭父窗口的一句代码
2013/10/21 Javascript
node.js中的fs.readSync方法使用说明
2014/12/17 Javascript
javascript动态创建链接的方法
2015/05/13 Javascript
JavaScript 监控微信浏览器且自带返回按钮时间
2016/11/27 Javascript
JS ES6中setTimeout函数的执行上下文示例
2017/04/27 Javascript
xmlplus组件设计系列之树(Tree)(9)
2017/05/02 Javascript
jQuery实现点击关注和取消功能
2017/07/03 jQuery
js实时监控文本框输入字数的实例代码
2018/01/18 Javascript
使用D3.js+Vue实现一个简单的柱形图
2018/08/05 Javascript
jQuery实现的简单日历组件定义与用法示例
2018/12/24 jQuery
element-ui上传一张图片后隐藏上传按钮功能
2019/05/22 Javascript
JavaScript实现多文件下载方法解析
2020/08/07 Javascript
原生JavaScript实现幻灯片效果
2021/02/19 Javascript
python使用urllib模块开发的多线程豆瓣小站mp3下载器
2014/01/16 Python
详解supervisor使用教程
2017/11/21 Python
Python绘制七段数码管实例代码
2017/12/20 Python
python实现字符串中字符分类及个数统计
2018/09/28 Python
Tensorflow矩阵运算实例(矩阵相乘,点乘,行/列累加)
2020/02/05 Python
15行Python代码实现免费发送手机短信推送消息功能
2020/02/27 Python
const char*, char const*, char*const的区别是什么
2014/07/09 面试题
经济管理专业毕业生推荐信
2013/11/11 职场文书
《欢乐的泼水节》教学反思
2014/04/22 职场文书
三年级学生评语
2014/04/23 职场文书
说明书范文
2014/05/07 职场文书
电气工程及其自动化专业求职信
2014/06/23 职场文书
创新社会管理心得体会
2014/09/12 职场文书
社区好人好事材料
2014/12/26 职场文书
2015国庆66周年宣传语
2015/07/14 职场文书
DBCA命令行搭建Oracle ADG的流程
2021/06/11 Oracle
pandas时间序列之pd.to_datetime()的实现
2022/06/16 Python