JavaScript+HTML5 canvas實現(xiàn)放大鏡效果完整示例

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

這篇文章主要介紹了JavaScript+HTML5 canvas實現(xiàn)放大鏡效果,結合完整實例形式分析了javascript+HTML5 canvas針對圖片元素的獲取、響應鼠標事件變換元素屬性相關操作技巧,需要的朋友可以參考下

本文實例講述了JavaScript+HTML5 canvas實現(xiàn)放大鏡效果。分享給大家供大家參考，具體如下：

效果：

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>m.fzitv.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 = {}, //用來保存選擇框數(shù)據(jù)
      box = canvas.getBoundingClientRect();
  //getBoundingClientRect方法可以獲取元素上、下、左、右分別相對瀏覽器的坐標位置
  //創(chuàng)建圖像對象，并加載
  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數(shù)據(jù)結構與算法技巧總結》及《JavaScript數(shù)學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。

您可能感興趣的文章: