JavaScript利用canvas实现炫酷的碎片切图效果

JavaScript利用canvas实现炫酷的碎片切图效果是一种非常流行的前端动画效果。下面是该攻略的详细步骤：

1. 准备工作

首先，需要在HTML文件中引入一个canvas元素，并为其指定宽度和高度。然后，在JavaScript文件中获取canvas元素，以便后续操作。

<canvas id="canvas" width="500" height="500"></canvas>

const canvas = document.getElementById("canvas");
const context = canvas.getContext("2d");

2. 加载图片

要实现碎片切图效果，需要先加载一张图片，并将其绘制到canvas中。可以使用Image对象来加载图片。

const image = new Image();
image.src = "image.jpg";
image.onload = function() {
  context.drawImage(image, 0, 0, canvas.width, canvas.height);
}

3. 切割图片

接下来，需要将加载的图片切割成多个小块，并将这些小块随机分布在canvas中。可以通过for循环嵌套来实现。

const pieces = [];
const pieceWidth = 50;
const pieceHeight = 50;
const rowCount = canvas.height / pieceHeight;
const columnCount = canvas.width / pieceWidth;
for (let row = 0; row < rowCount; row++) {
  for (let column = 0; column < columnCount; column++) {
    const x = column * pieceWidth;
    const y = row * pieceHeight;
    const data = context.getImageData(x, y, pieceWidth, pieceHeight);
    const piece = { x, y, data };
    pieces.push(piece);
  }
}

这段代码将canvas切割成多个小块，每个小块的大小为50*50，然后将每个小块的位置和像素数据存储在一个对象中，并将所有小块存储在数组pieces中。

4. 随机排列小块

现在，可以将存储在pieces数组中的所有小块随机排列。可以使用一个洗牌算法来实现。

for (let i = pieces.length - 1; i > 0; i--) {
  const j = Math.floor(Math.random() * (i + 1));
  [pieces[i], pieces[j]] = [pieces[j], pieces[i]];
}

这段代码对pieces数组中的每个元素都随机交换了一次位置。

5. 动画效果

最后一步，就是为每个小块添加动画效果。可以通过setInterval函数来实现，每次递增改变小块的位置、大小，从而实现动画效果。

let index = 0;
const duration = 1000;
const interval = setInterval(() => {
  if (index === pieces.length) {
    clearInterval(interval);
  } else {
    const piece = pieces[index];
    const startTime = Date.now();
    const animate = () => {
      const elapsed = Date.now() - startTime;
      if (elapsed >= duration) {
        piece.x = piece.originalX;
        piece.y = piece.originalY;
        piece.width = piece.originalWidth;
        piece.height = piece.originalHeight;
        index++;
      } else {
        const progress = elapsed / duration;
        const deltaX = Math.random() * 100 * progress;
        const deltaY = Math.random() * 100 * progress;
        const scale = 1 + (1 - progress);
        piece.x = piece.originalX + deltaX;
        piece.y = piece.originalY + deltaY;
        piece.width = piece.originalWidth * scale;
        piece.height = piece.originalHeight * scale;
      }
      drawPiece(piece);
    }
    animate();
  }
}, 50);

这段代码逐个遍历pieces数组中的小块，并对每个小块都添加了动画效果。注意：需要在animate函数中实现动画效果的逻辑。

您可以访问以下示例页面以查看完整代码和效果演示：

1. 示例一：https://codepen.io/hui_z/pen/KKVLPJW
2. 示例二：https://codepen.io/hui_z/pen/JjNVPyV