javascript - 如何在 Canvas 顶部的图像上获得围绕鼠标光标的悬停效果？

Question

当鼠标在 Canvas 上时，它会在鼠标周围显示一个红色圆圈。当鼠标悬停在图像上时，我希望有红色圆圈鼠标效果。

我想要右侧的放大 View ，同时只要光标位于图像上的任何位置，鼠标光标都具有悬停效果。

在此先感谢您的帮助和建议!

iPhone 缩放代码由 thecodeplayer 编写。
http://thecodeplayer.com/walkthrough/magnifying-glass-for-images-using-jquery-and-css3

鼠标光标圈代码由 Kirupa 编写。
https://www.kirupa.com/canvas/follow_mouse_cursor.htm

var canvas = document.querySelector("#myCanvas");
var context = canvas.getContext("2d");
var canvasPos = getPosition(canvas);
var mouseX = 0;
var mouseY = 0;

function getPosition(el) {
  var xPosition = 0;
  var yPosition = 0;
 
  while (el) {
    xPosition += (el.offsetLeft - el.scrollLeft + el.clientLeft);
    yPosition += (el.offsetTop - el.scrollTop + el.clientTop);
    el = el.offsetParent;
  }
  return {
    x: xPosition,
    y: yPosition
  };
}

function update() {
  context.clearRect(0, 0, canvas.width, canvas.height);
 
  context.beginPath();
  context.arc(mouseX, mouseY, 20, 0, 2 * Math.PI, true);
  context.fillStyle = "#FF6A6A";
  context.fill();
 
  requestAnimationFrame(update);
}

function setMousePosition(e) {
  mouseX = e.clientX - canvasPos.x;
  mouseY = e.clientY - canvasPos.y;
 
  context.clearRect(0, 0, canvas.width, canvas.height);
 
  context.beginPath();
  context.arc(mouseX, mouseY, 20, 0, 2 * Math.PI, true);
  context.fillStyle = "#FF6A6A";
  context.fill();
}

canvas.addEventListener("mousemove", setMousePosition, false);
update();

$(document).ready(function() {

  var native_width = 0;
  var native_height = 0;

  //Now the mousemove function
  $(".magnify").mousemove(function(e) {
    //When the user hovers on the image, the script will first calculate
    //the native dimensions if they don't exist. Only after the native dimensions
    //are available, the script will show the zoomed version.
    if (!native_width && !native_height) {
      //This will create a new image object with the same image as that in .small
      //We cannot directly get the dimensions from .small because of the 
      //width specified to 200px in the html. To get the actual dimensions we have
      //created this image object.
      var image_object = new Image();
      image_object.src = $(".small").attr("src");

      //This code is wrapped in the .load function which is important.
      //width and height of the object would return 0 if accessed before 
      //the image gets loaded.
      native_width = image_object.width;
      native_height = image_object.height;
    } else {
      //x/y coordinates of the mouse
      //This is the position of .magnify with respect to the document.
      var magnify_offset = $(this).offset();
      //We will deduct the positions of .magnify from the mouse positions with
      //respect to the document to get the mouse positions with respect to the 
      //container(.magnify)
      var mx = e.pageX - magnify_offset.left;
      var my = e.pageY - magnify_offset.top;

      //Finally the code to fade out the glass if the mouse is outside the container
      if (mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0) {
        $(".large").fadeIn(100);
      } else {
        $(".large").fadeOut(100);
      }
      if ($(".large").is(":visible")) {
        //The background position of .large will be changed according to the position
        //of the mouse over the .small image. So we will get the ratio of the pixel
        //under the mouse pointer with respect to the image and use that to position the 
        //large image inside the magnifying glass
        var rx = Math.round(mx / $(".small").width() * native_width - $(".large").width() / 2) * -1;
        var ry = Math.round(my / $(".small").height() * native_height - $(".large").height() / 2) * -1;
        var bgp = rx + "px " + ry + "px";

        //Time to move the magnifying glass with the mouse
        var px = mx - $(".large").width() / 2;
        var py = my - $(".large").height() / 2;
        //Now the glass moves with the mouse
        //The logic is to deduct half of the glass's width and height from the 
        //mouse coordinates to place it with its center at the mouse coordinates

        //If you hover on the image now, you should see the magnifying glass in action
        $(".large").css({
          left: px,
          top: py,
          backgroundPosition: bgp
        });
      }
    }
  })
})

canvas {
  border: #333 5px solid;
  z-index: 1;
}

/*Some CSS*/
.magnify {
  width: 100px;
  position: relative;
  margin-top: -205px;
  margin-left: 5px;
  z-index: 10;
}

/*Lets create the magnifying glass*/

.large {
  width: 120px;
  height: 120px;
  position: absolute;
  /*Multiple box shadows to achieve the glass effect*/
  box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
  /*Lets load up the large image first*/
  background: url('http://thecodeplayer.com/uploads/media/iphone.jpg') no-repeat;
  /*hide the glass by default*/
  display: none;
  margin-left: 150px;
}

/*To solve overlap bug at the edges during magnification*/
.small {
  display: block;
}

<canvas id="myCanvas" width="500px" height="195px"></canvas>

<!-- Lets make a simple image magnifier -->
<div class="magnify">
	
<!-- This is the magnifying glass which will contain the original/large version -->
<div class="large"></div>
	
<!-- This is the small image -->
<img class="small" src="http://thecodeplayer.com/uploads/media/iphone.jpg" width="102"/>
	
</div>

<!-- Lets load up prefixfree to handle CSS3 vendor prefixes -->
<script src="http://thecodeplayer.com/uploads/js/prefixfree.js" type="text/javascript"></script>
<!-- You can download it from http://leaverou.github.com/prefixfree/ -->

<!-- Time for jquery action -->
<script src="http://thecodeplayer.com/uploads/js/jquery-1.7.1.min.js" type="text/javascript"></script>

Answer 1

因为您想要图像上的悬停效果，所以我在 Canvas 上渲染了图像。我已经更新了答案。我认为这就是您的想法。

var canvas = document.querySelector("#myCanvas");
var context = canvas.getContext("2d");
var canvasPos = getPosition(canvas);
var mouseX = 0;
var mouseY = 0;

function getPosition(el) {
  var xPosition = 0;
  var yPosition = 0;

  while (el) {
    xPosition += (el.offsetLeft - el.scrollLeft + el.clientLeft);
    yPosition += (el.offsetTop - el.scrollTop + el.clientTop);
    el = el.offsetParent;
  }
  return {
    x: xPosition,
    y: yPosition
  };
}

function update() {
  context.clearRect(0, 0, canvas.width, canvas.height);

  /*context.beginPath();
  context.arc(mouseX, mouseY, 20, 0, 2 * Math.PI, true);
  context.fillStyle = "#FF6A6A";
  context.fill();*/

  requestAnimationFrame(update);
}

function setMousePosition(e) {
  mouseX = e.clientX - canvasPos.x;
  mouseY = e.clientY - canvasPos.y;

  context.clearRect(0, 0, canvas.width, canvas.height);

  context.beginPath();
  context.arc(mouseX, mouseY, 20, 0, 2 * Math.PI, true);
  context.fillStyle = "#FF6A6A";
  context.fill();
}

canvas.addEventListener("mousemove", setMousePosition, false);
update();

$(document).ready(function() {

  var native_width = 0;
  var native_height = 0;

  //Now the mousemove function
  $(".magnify").mousemove(function(e) {
    //When the user hovers on the image, the script will first calculate
    //the native dimensions if they don't exist. Only after the native dimensions
    //are available, the script will show the zoomed version.
    if (!native_width && !native_height) {
      //This will create a new image object with the same image as that in .small
      //We cannot directly get the dimensions from .small because of the 
      //width specified to 200px in the html. To get the actual dimensions we have
      //created this image object.
      var image_object = new Image();
      image_object.src = $(".small").attr("src");

      //This code is wrapped in the .load function which is important.
      //width and height of the object would return 0 if accessed before 
      //the image gets loaded.
      native_width = image_object.width;
      native_height = image_object.height;
    } else {
      //x/y coordinates of the mouse
      //This is the position of .magnify with respect to the document.
      var magnify_offset = $(this).offset();
      //We will deduct the positions of .magnify from the mouse positions with
      //respect to the document to get the mouse positions with respect to the 
      //container(.magnify)
      var mx = e.pageX - magnify_offset.left;
      var my = e.pageY - magnify_offset.top;

      //Finally the code to fade out the glass if the mouse is outside the container
      if (mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0) {
        $(".large").fadeIn(100);
      } else {
        $(".large").fadeOut(100);
      }
      if ($(".large").is(":visible")) {
        //The background position of .large will be changed according to the position
        //of the mouse over the .small image. So we will get the ratio of the pixel
        //under the mouse pointer with respect to the image and use that to position the 
        //large image inside the magnifying glass
        var rx = Math.round(mx / $(".small").width() * native_width - $(".large").width() / 2) * -1;
        var ry = Math.round(my / $(".small").height() * native_height - $(".large").height() / 2) * -1;
        var bgp = rx + "px " + ry + "px";

        //Time to move the magnifying glass with the mouse
        var px = mx - $(".large").width() / 2;
        var py = my - $(".large").height() / 2;
        //Now the glass moves with the mouse
        //The logic is to deduct half of the glass's width and height from the 
        //mouse coordinates to place it with its center at the mouse coordinates

        //If you hover on the image now, you should see the magnifying glass in action
        $(".large").css({
          backgroundPosition: bgp
        });
        $(".pointer").css({
          left: mx - 25,
          top: my - 25
        });
      }
    }
  })
})

canvas {
  border: #333 5px solid;
  z-index: 0;
}


/*Some CSS*/

.magnify {
  width: 100px;
  position: relative;
  margin-top: -205px;
  margin-left: 5px;
  z-index: 10;
}


/*Lets create the magnifying glass*/

.large {
  width: 120px;
  height: 120px;
  position: absolute;
  /*Multiple box shadows to achieve the glass effect*/
  box-shadow: 0 0 0 7px rgba(255, 255, 255, 0.85), 0 0 7px 7px rgba(0, 0, 0, 0.25), inset 0 0 40px 2px rgba(0, 0, 0, 0.25);
  /*Lets load up the large image first*/
  background: url('http://thecodeplayer.com/uploads/media/iphone.jpg') no-repeat;
  /*hide the glass by default*/
  display: none;
  margin-left: 150px;
}


/*To solve overlap bug at the edges during magnification*/

.small {
  display: block;
  z-index: 1;
  position: relative;
}

.pointer {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #FF6A6A;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 9999999;
  opacity: 0.5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="myCanvas" width="500px" height="195px"></canvas>

<!-- Lets make a simple image magnifier -->
<div class="magnify">

  <!-- This is the magnifying glass which will contain the original/large version -->
  <div class="large"></div>

  <!-- This is the small image -->
  <img class="small" src="http://thecodeplayer.com/uploads/media/iphone.jpg" width="102" />
  <div class="pointer"></div>
</div>