js实现鼠标跟随图片局部放大镜效果代码-html代码-BFW代码库

js实现鼠标跟随图片局部放大镜效果代码

代码语言：html

代码描述：js实现鼠标跟随图片局部放大镜效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/normalize.css">
<style>
canvas {
  display: block;
  height: 100%;
  width: 100%;
}
</style>


  
  
</head>

<body translate="no">
  
  
      <script >
const imageSource =
"//repo.bfw.wiki/bfwrepo/image/5d65ea7d8bc8b.png";
const img = new Image();
img.crossOrigin = true;
const c = document.createElement("canvas");
const ctx = c.getContext("2d");
const scale = Math.max(devicePixelRatio, 2);
const ZOOM_SIZE = 350;
const SAMPLE_SIZE = 100;
let imageData;
let running = false;

function setCanvasSize() {
  c.width = window.innerWidth * scale;
  c.height = window.innerHeight * scale;
}

function onResize() {
  setCanvasSize();
  coverCanvas();
}

function onPointerMove(e) {
  const { x, y } = e;

  // draw the base image
  ctx.putImageData(imageData, 0, 0);

  const sampleSize = SAMPLE_SIZE * scale;
  const zoomSize = ZOOM_SIZE * scale;

  // set clipping region to a circle
  ctx.save();
  ctx.beginPath();
  ctx.arc(x * scale, y * scale, zoomSize / 2, 0, Math.PI * 2);
  ctx.closePath();
  ctx.clip();

  // draw a zoomed box at the pointer
  ctx.drawImage(
  c,
  x * scale - sampleSize / 2, // source x (offseti.........完整代码请登录后点击上方下载按钮下载查看