图像上的放大效果 | HTML 画布

介绍

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

👀 预览

放大镜效果演示

🎯 任务

在这个项目中，你将学习：

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

🏆 成果

完成这个项目后，你将能够：

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

设计网页

我们将设计一个简单的网页，它包含两个画布（canvas 和 copycanvas）以及一个用作放大选择器的方形 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>

设置画布并加载图像

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

初始化画布及其上下文。

// 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();

加载图像并将其绘制到画布上。

var image = new Image();
image.src = "corgi.png";
image.onload = function () {
  // 这里使用了画布绘制图像的方法
  context.drawImage(image, 0, 0, canvas.width, canvas.height);
};

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

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

捕获画布上的鼠标坐标。

// main.js
canvas.onmouseover = function (e) {
  var x = e.clientX;
  var y = e.clientY;
  createSquare(x, y);
};

现在，我们要确保放大效果跟随鼠标移动。我们将实现跟踪此移动并相应更新效果的函数。

// 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();
  }
};

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

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

定义显示或隐藏方形和复制画布的函数。

// 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";
}

创建放大效果。

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(); // 调用放大效果
}

定位方形并调用放大功能。

// 移动方形选择器和放大显示的函数
function moveSquare(x, y) {
  square.style.left = x + "px";
  square.style.top = y + "px";
  showCanvas();
  showSquare();
}

在复制画布上创建放大效果。

function copy() {
  copycontext.drawImage(
    canvas, // 指定源画布
    squaredata.left - box.left, // 开始复制的位置
    squaredata.top - box.top,
    90, // 要复制的数据的宽度和高度
    90,
    0, // 复制画布上的目标位置
    0,
    copycanvas.width,
    copycanvas.height
  );
}