JavaScript+html5 canvas实现图片破碎重组动画特效

首先，在网站首页或其他页面中插入一个canvas元素，让用户能够看到动画特效。

<canvas id="myCanvas"></canvas>

然后，使用JavaScript代码写出实现图片破碎重组动画特效的步骤：

1. 加载图片并创建画布

const image = new Image();  // 创建图片对象
image.src = 'image.jpg';     // 设置图片路径
const canvas = document.getElementById('myCanvas');  // 获取画布元素
const ctx = canvas.getContext('2d');  // 获取画布上下文

1. 等待图片加载完成后，将其绘制到画布中

image.onload = function() {
  // 设置画布尺寸等于图片尺寸
  canvas.width = image.width;
  canvas.height = image.height;
  // 在画布上绘制图片
  ctx.drawImage(image, 0, 0);
};

1. 将图片分割成多个小块，并保存其位置信息

const rows = 6;     // 将图片分成6行
const columns = 6;  // 将图片分成6列
const pieces = [];  // 保存小块位置信息的数组

// 根据行列数计算小块大小
const pieceWidth = canvas.width / columns;
const pieceHeight = canvas.height / rows;

for (let y = 0; y < rows; y++) {
  for (let x = 0; x < columns; x++) {
    // 根据坐标计算小块在图片中的位置
    const xPos = x * pieceWidth;
    const yPos = y * pieceHeight;

    // 将小块的位置信息保存到数组中
    pieces.push({
      x: xPos,
      y: yPos,
      width: pieceWidth,
      height: pieceHeight
    });
  }
}

1. 将小块打乱顺序，使其看起来像是被破碎了

// 打乱顺序的函数
function shuffle(array) {
  var currentIndex = array.length, temporaryValue, randomIndex;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}

// 将小块位置信息数组打乱顺序
shuffle(pieces);

1. 将小块按照顺序依次绘制到画布中，形成破碎效果

let counter = 0;     // 记录已绘制的小块数量
const interval = setInterval(function() {
  // 绘制下一个小块
  const piece = pieces[counter];
  ctx.drawImage(image, piece.x, piece.y, piece.width, piece.height,
      piece.x, piece.y, piece.width, piece.height);
  counter++;

  // 如果全部小块都已经绘制，则停止绘制并开始重组
  if (counter === pieces.length) {
    clearInterval(interval);
    setTimeout(function() {
      // 重新打乱小块顺序
      shuffle(pieces);

      // 将小块按照顺序重组到画布中
      counter = 0;
      const interval2 = setInterval(function() {
        const piece = pieces[counter];
        ctx.drawImage(image, piece.x, piece.y, piece.width, piece.height,
            piece.x, piece.y, piece.width, piece.height);
        counter++;

        // 如果重组完成，则停止绘制
        if (counter === pieces.length) {
          clearInterval(interval2);
        }
      }, 10);
    }, 1000);
  }
}, 10);

示例1：通过点击按钮触发破碎重组动画

<button onclick="startAnimation()">Start Animation</button>
<canvas id="myCanvas"></canvas>

<script>
function startAnimation() {
  // JavaScript代码
}
</script>

示例2：使破碎重组动画可以自动触发、循环播放

function playAnimation() {
  setInterval(function() {
    // JavaScript代码
  }, 3000);
}