使用 Canvas 实现扫描效果：宽度计算、透明度控制与旋转

介绍

在前端开发中，<canvas> 元素提供了强大的图形绘制能力。我们可以使用 canvas 来进行各种图像处理操作，包括图像加载、旋转、缩放以及创建动态效果。在很多应用中，扫描效果是一种常见的视觉效果，比如条形码扫描、激光扫描、加载动画等。

本文将介绍如何通过 canvas 元素实现一个平滑的扫描效果，使得图像从顶部到底部逐渐显示，模拟扫描的过程。同时，还将提供一个AI生成提示（Prompt），供图像生成模型（如 DALL·E、MidJourney）参考，帮助快速生成所需的图像。

实现思路

1. 获取图片并绘制

首先，我们需要将图像绘制到 canvas 上。通过 drawImage 方法将图像绘制到 canvas 上。

2. 使用 `ImageData` 获取像素数据

getImageData() 方法允许我们获取 canvas 中特定区域的像素数据。ImageData 对象包含图像的 RGBA 值，这样我们就可以逐个像素地操作图像。

3. 计算透明度

根据扫描的进度，调整每个像素的透明度。我们将透明度根据 y 坐标的值逐渐改变，从顶部完全透明，到底部完全不透明。透明度的变化将通过调整 ImageData 中的 Alpha 通道值来实现。

4. 动画实现

使用 setInterval 或 requestAnimationFrame 来动态更新扫描的进度，逐渐显示图像的不同部分，直到图像完全显示。

代码实现

1. 初始化和宽度计算部分

在这个部分，我们计算 canvas 的宽高，并通过 devicePixelRatio 适配高清屏幕。

ini 复制代码

const displayWidth = props.width;
const displayHeight = props.height;

// 设置 canvas 的 CSS 尺寸
canvas.style.width = displayWidth + "px";
canvas.style.height = displayHeight + "px";

// 设置 canvas 的像素尺寸
canvas.width = displayWidth * devicePixelRatio;
canvas.height = displayHeight * devicePixelRatio;
ctx.scale(devicePixelRatio, devicePixelRatio); // 为高清屏幕做适配

2. 透明度控制和扫描效果部分

在这部分中，我们获取图像数据，并根据扫描进度修改透明度，逐步显示图像。

ini 复制代码

// 获取图像数据
const imageData = ctx.getImageData(-imgSize / 2, -imgSize / 2, imgSize, imgSize);
const data = imageData.data;

// 根据扫描进度逐渐修改透明度
for (let y = 0; y < imgSize; y++) {
  for (let x = 0; x < imgSize; x++) {
    const index = (y * imgSize + x) * 4; // 每个像素有4个值（RGBA）

    const alpha = y <= scanProgress ? 1 : 0; // 计算透明度
    data[index + 3] = Math.round(alpha * 255); // 修改透明度值
  }
}

// 更新图像数据
ctx.putImageData(imageData, -imgSize / 2, -imgSize / 2);

3. 旋转和反旋转部分

这部分涉及图像的旋转或反旋转，我们通过 getParentRotateDeg() 获取父元素的旋转角度，并根据需要旋转图像。

scss 复制代码

// 获取旋转角度
function getParentRotateDeg(): number {
  const transform = parent.style.transform || getComputedStyle(parent).transform;
  if (!transform || transform === "none") return 0;

  const match = transform.match(/rotate(([-\d.]+)deg)/);
  if (match) return Number(match[1]);

  const matrixMatch = transform.match(/matrix(([-\d., ]+))/);
  if (matrixMatch) {
    const values = matrixMatch[1].split(",").map(Number);
    const a = values[0], b = values[1];
    const rad = Math.atan2(b, a);
    return rad * (180 / Math.PI);
  }

  return 0;
}

// 旋转图像
function draw(deg: number) {
  ctx.clearRect(0, 0, displayWidth, displayHeight); // 清除画布
  ctx.save();

  // 将 canvas 的旋转中心设置为中心
  ctx.translate(displayWidth / 2, displayHeight / 2);
  ctx.rotate((deg * Math.PI) / 180); // 旋转角度

  // 绘制图像
  ctx.drawImage(img, -imgSize / 2, -imgSize / 2, imgSize, imgSize);
  
  // 恢复状态
  ctx.restore();
}

示例地址

总结

通过对 canvas 的宽高计算、透明度控制以及旋转的处理，我们能够实现图像的逐步扫描效果。结合 AI 图像生成提示，我们可以创造出未来感十足的动态扫描效果图像，应用于各种设计场景中。这种技术不仅适用于条形码扫描、图像加载动画，还可以用于创意设计和动态显示效果。