canvas将序列png多图解析绘制

const plistData = {
  "frames": {
    "thunder/1.png": {
      "width": 446,
      "height": 79,
      "originalWidth": 446,
      "originalHeight": 79,
      "x": 0,
      "y": 0,
      "offsetX": 0,
      "offsetY": 0
    },
    "thunder/5.png": {
      "width": 446,
      "height": 79,
      "originalWidth": 446,
      "originalHeight": 79,
      "x": 448,
      "y": 0,
      "offsetX": 0,
      "offsetY": 0
    },
    "thunder/2.png": {
      "width": 446,
      "height": 79,
      "originalWidth": 446,
      "originalHeight": 79,
      "x": 0,
      "y": 81,
      "offsetX": 0,
      "offsetY": 0
    },
    "thunder/3.png": {
      "width": 446,
      "height": 79,
      "originalWidth": 446,
      "originalHeight": 79,
      "x": 448,
      "y": 81,
      "offsetX": 0,
      "offsetY": 0
    },
    "thunder/4.png": {
      "width": 446,
      "height": 79,
      "originalWidth": 446,
      "originalHeight": 79,
      "x": 0,
      "y": 162,
      "offsetX": 0,
      "offsetY": 0
    }
  },
  "metadata": {
    "format": 0,
    "textureFileName": "thunder0.png",
    "realTextureFileName": "thunder0.png",
    "size": "{1024,1024}"
  },
  "texture": {
    "width": 1024,
    "height": 1024
  }
};


// 解析.plist中的frames数据
const frames = plistData.frames;
// 获得canvas元素和上下文
const canvas_draw = document.getElementById('animationCanvas');
const canvas_ctx = canvas_draw.getContext('2d');
// 加载纹理图像
const textureImage = new Image();
textureImage.src = "thunder0.png";
// 播放动画的函数
let currentFrameIndex = 0;
function playAnimation() {
  let frameData = frames[`thunder/${currentFrameIndex + 1}.png`];
  if (!frameData) {
    return;
    // 重置帧索引以循环播放
    currentFrameIndex = 0;
    frameData = frames[`thunder/${currentFrameIndex + 1}.png`];
  }

  canvas_ctx.clearRect(0, 0, canvas_draw.width, canvas_draw.height);
  canvas_ctx.drawImage(
    textureImage,
    frameData.x, frameData.y, frameData.width, frameData.height,
    frameData.offsetX, frameData.offsetY, frameData.originalWidth, frameData.originalHeight
  );

  currentFrameIndex++;
  // 增加延迟，例如延迟100毫秒
  setTimeout(function () {
    requestAnimationFrame(playAnimation);
  }, 200);
}
{/* // 加载完成后播放动画 */ }
textureImage.onload = playAnimation;

function start(){
  currentFrameIndex = 0;
  playAnimation();
}

canvas测试组件

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

×

*转载请注明出处：原文链接：https://cpp.vin/page/127.html