使用画布实现放大镜效果

JavaScriptJavaScriptBeginner
立即练习

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

在这个项目中,你将学习如何使用 HTML Canvas 对图像创建放大效果。这种效果在图像画廊或产品网站上很常见,它允许用户将鼠标悬停在图像上,从而获得特定部分的放大视图。放大效果提供了详细的视图,而无需打开新窗口或页面。

👀 预览

放大镜效果演示

🎯 任务

在这个项目中,你将学习:

  • 如何初始化和设置 HTML Canvas 元素
  • 如何将图像加载到画布上
  • 如何为鼠标移动实现事件监听器
  • 如何为选择器和放大显示创建辅助函数

🏆 成果

完成这个项目后,你将能够:

  • 使用 Canvas API 绘制和操作图像
  • 跟踪鼠标坐标并响应鼠标移动事件
  • 通过复制和显示图像的一部分来创建放大效果

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("`JavaScript`")) -.-> javascript/BasicConceptsGroup(["`Basic Concepts`"]) javascript(("`JavaScript`")) -.-> javascript/DOMManipulationGroup(["`DOM Manipulation`"]) javascript/BasicConceptsGroup -.-> javascript/functions("`Functions`") javascript/DOMManipulationGroup -.-> javascript/dom_select("`DOM Selection`") javascript/DOMManipulationGroup -.-> javascript/dom_manip("`DOM Manipulation`") javascript/DOMManipulationGroup -.-> javascript/event_handle("`Event Handling`") subgraph Lab Skills javascript/functions -.-> lab-445721{{"`使用画布实现放大镜效果`"}} javascript/dom_select -.-> lab-445721{{"`使用画布实现放大镜效果`"}} javascript/dom_manip -.-> lab-445721{{"`使用画布实现放大镜效果`"}} javascript/event_handle -.-> lab-445721{{"`使用画布实现放大镜效果`"}} end

设计网页

我们将设计一个简单的网页,它包含两个画布(canvascopycanvas)以及一个用作放大选择器的方形 div。

index.html 中,添加以下内容:

<!doctype html>
<html lang="en">
  <head>
    <title>使用 Canvas 的放大效果</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <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="500" height="400"></canvas>
    <canvas id="copycanvas" width="300" height="300"></canvas>
    <div id="square"></div>
    <script src="main.js"></script>
  </body>
</html>
✨ 查看解决方案并练习

设置画布并加载图像

现在,我们将初始化画布,创建一个图像对象,并将图像加载到画布中。

  1. 初始化画布及其上下文。
// main.js
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

// 初始化复制画布及其上下文
var copycanvas = document.getElementById("copycanvas");
var copycontext = copycanvas.getContext("2d");

// 初始化方形选择器
var square = document.getElementById("square");
var squaredata = {};
// getBoundingClientRect 方法可以获取元素相对于浏览器的顶部、底部、左侧和右侧坐标
box = canvas.getBoundingClientRect();
  1. 加载图像并将其绘制到画布上。
var image = new Image();
image.src = "corgi.png";
image.onload = function () {
  // 这里使用了画布绘制图像的方法
  context.drawImage(image, 0, 0, canvas.width, canvas.height);
};
✨ 查看解决方案并练习

为鼠标移动实现事件监听器

为了使我们的放大效果具有交互性,我们将添加事件监听器来检测鼠标何时移过图像。

  1. 捕获画布上的鼠标坐标。
// main.js
canvas.onmouseover = function (e) {
  var x = e.clientX;
  var y = e.clientY;
  createSquare(x, y);
};
  1. 现在,我们要确保放大效果跟随鼠标移动。我们将实现跟踪此移动并相应更新效果的函数。
// main.js
// 跟踪鼠标移动以处理放大效果
window.onmousemove = function (e) {
  var x = e.clientX;
  var y = e.clientY;
  // 确定鼠标是否在画布上方
  if (
    x >= canvas.offsetLeft &&
    x <= canvas.offsetLeft + canvas.width &&
    y >= canvas.offsetTop &&
    y <= canvas.offsetTop + canvas.height
  ) {
    createSquare(x, y); // 更新放大效果
  } else {
    hideSquare(); // 鼠标移出时隐藏放大效果
    hideCanvas();
  }
};
✨ 查看解决方案并练习

为选择器和放大显示创建辅助函数

我们脚本的主要功能包括创建放大效果并复制图像的必要部分。现在让我们定义这些功能。

  1. 定义显示或隐藏方形和复制画布的函数。
// main.js
function showSquare() {
  square.style.display = "block";
}

function hideSquare() {
  square.style.display = "none";
}

function showCanvas() {
  copycanvas.style.display = "inline";
}

function hideCanvas() {
  copycanvas.style.display = "none";
}
  1. 创建放大效果。
function createSquare(x, y) {
  // 位置调整,以使方形保持在画布边界内
  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); // 定位方形
  copy(); // 调用放大效果
}
  1. 定位方形并调用放大功能。
// 移动方形选择器和放大显示的函数
function moveSquare(x, y) {
  square.style.left = x + "px";
  square.style.top = y + "px";
  showCanvas();
  showSquare();
}
  1. 在复制画布上创建放大效果。
function copy() {
  copycontext.drawImage(
    canvas, // 指定源画布
    squaredata.left - box.left, // 开始复制的位置
    squaredata.top - box.top,
    90, // 要复制的数据的宽度和高度
    90,
    0, // 复制画布上的目标位置
    0,
    copycanvas.width,
    copycanvas.height
  );
}
✨ 查看解决方案并练习

运行项目

  • 在网页浏览器中打开 index.html
    open web
  • 将鼠标悬停在图像上以查看放大效果。
  • 页面效果如下:
    magnifying glass effect demo
✨ 查看解决方案并练习

总结

在本项目中,我们成功地使用 HTML5 中的画布功能构建了一个放大镜效果。我们学习了如何与 drawImage() 方法进行交互、处理鼠标事件以及使我们的效果响应用户操作。这是一个基础版本,可以进行许多增强,例如调整放大级别、添加逼真的放大镜覆盖层等。编码愉快!

您可能感兴趣的其他 JavaScript 教程