如何在画布中滚动多个帧？

// 创建画布元素
var canvas = document.createElement("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.appendChild(canvas);

// 获取绘制上下文
var ctx = canvas.getContext("2d");

// 定义帧的大小和数量
var frameSize = { width: 100, height: 100 };
var frameCount = { rows: 5, columns: 5 };

// 定义帧的初始位置
var initialPosition = { x: 0, y: 0 };

// 定义帧的滚动速度
var scrollSpeed = { x: 2, y: 1 };

// 定义帧的间距
var frameSpacing = 10;

// 定义帧的颜色
var frameColor = "blue";

// 定义绘制函数
function draw() {
  // 清空画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制每个帧
  for (var row = 0; row < frameCount.rows; row++) {
    for (var col = 0; col < frameCount.columns; col++) {
      // 计算当前帧的位置
      var position = {
        x: initialPosition.x + (col * (frameSize.width + frameSpacing)),
        y: initialPosition.y + (row * (frameSize.height + frameSpacing))
      };

      // 绘制帧的矩形
      ctx.fillStyle = frameColor;
      ctx.fillRect(position.x, position.y, frameSize.width, frameSize.height);
    }
  }
}

// 定义更新函数
function update() {
  // 改变帧的位置
  initialPosition.x += scrollSpeed.x;
  initialPosition.y += scrollSpeed.y;

  // 当帧的位置超出画布边界时，重新设置位置
  if (initialPosition.x > canvas.width) {
    initialPosition.x = -frameCount.columns * (frameSize.width + frameSpacing);
  }
  if (initialPosition.y > canvas.height) {
    initialPosition.y = -frameCount.rows * (frameSize.height + frameSpacing);
  }
}

// 循环调用绘制函数和更新函数
function animate() {
  draw();
  update();
  requestAnimationFrame(animate);
}

// 开始动画
animate();