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面象对象设计
Apr 28 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
May 07 Javascript
跟我学Node.js(四)---Node.js的模块载入方式与机制
Jun 04 Javascript
使用命令对象代替switch语句的写法示例
Feb 28 Javascript
js实现上传图片预览方法
Oct 25 Javascript
js实现背景图自适应窗口大小
Jan 10 Javascript
微信小程序开发之入门实例教程篇
Mar 07 Javascript
vue脚手架vue-cli的学习使用教程
Jun 06 Javascript
详解angularjs 关于ui-router分层使用
Jun 12 Javascript
微信小程序之滚动视图容器的实现方法
Sep 26 Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
Oct 01 Javascript
详解Vue 事件修饰符capture 的使用
Dec 29 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 SPL使用方法和他的威力
2013/11/12 PHP
PHP 读取和编写 XML
2014/11/19 PHP
Js获取事件对象代码
2010/08/05 Javascript
JS实现在页面随时自定义背景颜色的方法
2015/02/27 Javascript
jquery+css实现的红色线条横向二级菜单效果
2015/08/22 Javascript
js仿支付宝填写支付密码效果实现多方框输入密码
2016/03/09 Javascript
浅谈JavaScript前端开发的MVC结构与MVVM结构
2016/06/03 Javascript
jQuery轮播图效果精简版完整示例
2016/09/04 Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
2016/12/27 Javascript
解决浏览器会自动填充密码的问题
2017/04/28 Javascript
Webpack中雪碧图插件使用详解
2018/05/25 Javascript
Vue中使用vux配置代码详解
2018/09/16 Javascript
vue axios基于常见业务场景的二次封装的实现
2018/09/21 Javascript
小程序红包雨的实现示例
2019/02/19 Javascript
浅谈layui分页控件field参数接收对象的问题
2019/09/20 Javascript
vue路由传参页面刷新参数丢失问题解决方案
2019/10/08 Javascript
微信小程序图片自适应实现解析
2020/01/21 Javascript
openLayer4实现动态改变标注图标
2020/08/17 Javascript
[08:17]Ti9 现场cosplay
2019/09/10 DOTA
python实现代理服务功能实例
2013/11/15 Python
Windows下PyMongo下载及安装教程
2015/04/27 Python
python中使用序列的方法
2015/08/03 Python
Python使用random.shuffle()打乱列表顺序的方法
2018/11/08 Python
python使用selenium登录QQ邮箱(附带滑动解锁)
2019/01/23 Python
Python创建或生成列表的操作方法
2019/06/19 Python
django自带serializers序列化返回指定字段的方法
2019/08/21 Python
python实现微信打飞机游戏
2020/03/24 Python
Jupyter notebook设置背景主题,字体大小及自动补全代码的操作
2020/04/13 Python
numba提升python运行速度的实例方法
2021/01/25 Python
瑞典时尚服装购物网站:Miinto.se
2017/10/30 全球购物
什么是Smarty变量操作符?如何使用Smarty变量操作符
2014/07/18 面试题
金融事务专业毕业生求职信
2014/02/23 职场文书
开平碉楼导游词
2015/02/06 职场文书
2016年综治宣传月活动宣传标语口号
2016/03/16 职场文书
2016年基层党组织公开承诺书
2016/03/25 职场文书
2019年农民幸福观调查的实践感悟
2019/12/19 职场文书